import Feauters from 'components/Sections/Features';
import Hero from './Hero';
import ProxyManagement from 'components/Sections/ProxyManagement';
import GetStarted from 'components/Sections/GetStarted';
import StatisticCards from 'components/Sections/StatisticCards';
import CTA from 'components/Sections/CTA';
import PaymentsSection from 'components/Sections/PaymentsSection';
import Benefits from 'components/Sections/Benefits';
import Locations from 'components/Sections/Locations';
import FAQ from 'components/Sections/FAQ';
// import Preloader from 'Layout/Preloader';
import {
    fetchCurrentProduct,
    selectCurrentProduct,
    // selectCurrentProduct,
    selectProductBenefits,
    selectProductCTA,
    selectProductCTAFooter,
    selectProductDashboard,
    selectProductFAQ,
    selectProductFeatures,
    selectProductIsLoading,
    selectProductLocations,
    selectProductPayments,
    selectProductStatistics,
} from 'store/slices/ProductSlice';
import { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectFeatures } from 'store/slices/FeaturesSlice';
import { useNavigate, useParams } from 'react-router-dom';
import ProductPrice from 'components/Sections/ProductPricing';
import { useImageLoaded } from 'hooks/useImageLoaded';

const ProductPage = () => {
    const { productSlug } = useParams();
    const navigate = useNavigate()
    const [isLoading, setIsLoading] = useState(true);

    const dispatch = useDispatch();
    const data = useSelector(selectCurrentProduct)

    const isProductLoading = useSelector(selectProductIsLoading);
    const isLoadedImages = useImageLoaded(productSlug);

    const statistics = useSelector(selectProductStatistics);
    const cta = useSelector(selectProductCTA);
    const payments = useSelector(selectProductPayments);
    const featuresSideText = useSelector(selectProductFeatures);
    const feauters = useSelector(selectFeatures);
    const dashboard = useSelector(selectProductDashboard);
    const benefits = useSelector(selectProductBenefits);
    const locationsText = useSelector(selectProductLocations);
    const faq = useSelector(selectProductFAQ);
    const ctaFooter = useSelector(selectProductCTAFooter);

    useEffect(() => {
        if (productSlug) {
            // @ts-ignore
            dispatch(fetchCurrentProduct({ productSlug }));
        }
    }, [dispatch, productSlug]);

    useEffect(() => {
        if (isLoadedImages && !isProductLoading && productSlug) {
            setIsLoading(false)
        } else (setIsLoading(true))
    }, [isLoadedImages, isProductLoading, productSlug]);

    if (!isProductLoading && !data) {
        navigate("*");
        return null;
    }

    return !isProductLoading && (
        <>
            <Hero />
            <StatisticCards data={statistics} isLoading={isLoading} />
            <ProductPrice isLoading={isLoading} />
            <CTA cta={cta} isLoading={isLoading} />
            <PaymentsSection payments={payments} isLoading={isLoading} />
            <Feauters featuresSideText={featuresSideText} features={feauters} isLoading={isLoading} />
            <ProxyManagement dashboard={dashboard} isLoading={isLoading} />
            <Benefits data={benefits} isLoading={isLoading} />
            <Locations locationsText={locationsText} isLoading={isLoading} />
            <FAQ data={faq} isLoading={isLoading} />
            <GetStarted cta={ctaFooter} isLoading={isLoading} />
        </>
    );
};

export default ProductPage;

• [D] Hero
• [F] index.jsx
  Delete
• [F] mockData.js
  Delete