/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/pages/LandingPage/index.jsx
import TrastedPartners from 'components/Sections/TrastedPartners';
import OurProducts from 'components/Sections/OurProducts/';
import Reviews from 'components/Sections/Reviews';
import GetStarted from 'components/Sections/GetStarted';
import Hero from './Hero';
import RadioFAQ from './FAQ';
import { useDispatch, useSelector } from 'react-redux';
import {
    selectLandingPagePartners,
    selectLandingPageProducts,
    selectLandingPageReviews,
    selectLandingPageCta,
    selectLandingPageIsLoading,
    fetchCurrentLandingPage
} from 'store/slices/LandingSlice';
import { useEffect, useState } from 'react';
import { useImageLoaded } from 'hooks/useImageLoaded';
import { useParams } from 'react-router-dom';


const LandingPage = () => {
    const dispatch = useDispatch();
    const [isLoading, setIsLoading] = useState(true);
    const isLoadedImages = useImageLoaded();
    const { landingPageSlug } = useParams();


    const partners = useSelector(selectLandingPagePartners);
    const { title, product_card, tag } = useSelector(selectLandingPageProducts);
    const reviews = useSelector(selectLandingPageReviews);
    const cta = useSelector(selectLandingPageCta);
    const landingIsLoading = useSelector(selectLandingPageIsLoading);

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

    useEffect(() => {
        if (isLoadedImages && !landingIsLoading) {
            setIsLoading(false)
        }
    }, [isLoadedImages, landingIsLoading]);

    return !landingIsLoading && (
        <>
            <Hero isLoading={isLoading} />
            <TrastedPartners data={partners} isLoading={isLoading} />
            <OurProducts title={title} tag={tag} products={product_card} isLoading={isLoading} />
            <RadioFAQ isLoading={isLoading} />
            <Reviews reviews={reviews} isLoading={isLoading} />
            <GetStarted cta={cta} isLoading={isLoading} />
        </>
    );
};

export default LandingPage;