import './styles.scss';
import PricingHero from './PricingHero';
import GetStarted from 'components/Sections/GetStarted';
import PaymentsSection from 'components/Sections/PaymentsSection';
import FAQ from 'components/Sections/FAQ';
import CTA from 'components/Sections/CTA';
import PricingTabs from './PricingTabs';
import { useDispatch, useSelector } from 'react-redux';
import {
    fetchPricing,
    selectPricingCTA,
    selectPricingDescription,
    selectPricingIsLoading,
    selectPricingTitle,
    selectPricingCTAFooter,
    selectPricingPayments,
    selectPricingFAQ,
} from 'store/slices/PricingSlice';
import { useEffect, useState } from 'react';
// import Preloader from 'Layout/Preloader';
import ProductPrice from 'components/Sections/ProductPricing';
import { useImageLoaded } from 'hooks/useImageLoaded';

const Pricing = () => {
    const dispatch = useDispatch();
    const [isLoading, setIsLoading] = useState(true);
    const isPricingLoading = useSelector(selectPricingIsLoading);
    const isLoadedImages = useImageLoaded(null, selectPricingIsLoading);
    const title = useSelector(selectPricingTitle);
    const description = useSelector(selectPricingDescription);
    const cta = useSelector(selectPricingCTA);
    const payments = useSelector(selectPricingPayments);
    const faq = useSelector(selectPricingFAQ);
    const ctaFooter = useSelector(selectPricingCTAFooter);

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

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

    return !isPricingLoading && (
        <>
            {/* {isLoading && <Preloader />} */}
            <PricingHero title={title} desc={description} isLoading={isLoading} />
            <ProductPrice withTable={false} isLoading={isLoading} />
            <CTA cta={cta} isLoading={isLoading} />
            <PricingTabs isLoading={isLoading} />
            <PaymentsSection payments={payments} isLoading={isLoading} />
            <FAQ data={faq} isLoading={isLoading} />
            <GetStarted cta={ctaFooter} isLoading={isLoading} />
        </>
    );
};

export default Pricing;

• [D] PricingHero
• [D] PricingTabs
• [F] index.jsx
  Delete
• [F] styles.scss
  Delete