import StatisticCards from "components/Sections/StatisticCards";
import FiatureSingles from "./FeatureSingle";
import Benefits from "components/Sections/Benefits";
import UseCases from "components/Sections/UseCases";
import Hero from "./Hero";
import FAQ from "components/Sections/FAQ";
import GetStarted from "components/Sections/GetStarted";
import { useNavigate, useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import {
    fetchCurrentFeature,
    selectCurrentFeaturesHero,
    selectCurrentFeaturesSingle,
    selectCurrentFeaturesStatistic,
    selectCurrentFeaturesBenefits,
    selectCurrentFeaturesUseCases,
    selectCurrentFeaturesFAQ,
    selectCurrentFeaturesCTA,
    selectCurrentFeatureIsLoading,
    selectCurrentFeatures
} from "store/slices/FeaturesSlice";
import { useEffect, useState } from "react";
import { useImageLoaded } from "hooks/useImageLoaded";

const Features = () => {
    const dispatch = useDispatch();
    const { featuresSlug } = useParams();
    const navigate = useNavigate()
    const [isLoading, setIsLoading] = useState(true);

    const data = useSelector(selectCurrentFeatures)
    const isFeatureLoading = useSelector(selectCurrentFeatureIsLoading);
    const isLoadedImages = useImageLoaded(featuresSlug, isFeatureLoading);

    const hero = useSelector(selectCurrentFeaturesHero);
    const statistic = useSelector(selectCurrentFeaturesStatistic);
    const single = useSelector(selectCurrentFeaturesSingle);
    const benefits = useSelector(selectCurrentFeaturesBenefits);
    const useCases = useSelector(selectCurrentFeaturesUseCases);
    const faq = useSelector(selectCurrentFeaturesFAQ);
    const cta = useSelector(selectCurrentFeaturesCTA);
    useEffect(() => {
        if (featuresSlug) {
            // @ts-ignore
            dispatch(fetchCurrentFeature({ featuresSlug }));
        }
    }, [dispatch, featuresSlug]);

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


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

    return !isFeatureLoading && (
        <>
            {/* {
                isLoading && <Preloader />
            } */}
            <Hero data={hero} />
            <StatisticCards data={statistic} isLoading={isLoading} />
            <FiatureSingles data={single} isLoading={isLoading} />
            <Benefits data={benefits} isLoading={isLoading} />
            <UseCases useCases={useCases} isLoading={isLoading} />
            <FAQ data={faq} isLoading={isLoading} />
            <GetStarted cta={cta} isLoading={isLoading} />
        </>
    );
}

export default Features;

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