"use client";
import { HomeView } from "@core/Models/Views.model";
import FrameSlider from "../Slider/Slider";
import ProductGallery from "../ProductsGallery/ProductGallery";
import AnimatedContainer from "../../AnimatedConainer/AnimatedContainer";
import Caminos from "../Caminos/Caminos";
import Footer from "../Footer/Footer";
import styles from "./page.module.css";
import { useNavigation } from "@core/app/hooks/goto";
import { useHeaderStore } from "@core/Store/Header.Store";
import { blurElementsOnLoad } from "@core/helpers/blur";
import { useEffect } from "react";

export interface IndexPageProps {
    homeData: HomeView;
}

export default function Index(props: IndexPageProps): React.ReactElement {
    const { homeData } = props;
    const headerState = useHeaderStore();
    const { goTo } = useNavigation();

    useEffect(() => {
        blurElementsOnLoad();
    }, []);

    return (
        <div>
            <div className="mainSectionWhite">
                <FrameSlider />
            </div>
            {(homeData.health?.data.length > 0 || homeData.education?.data.length > 0) && (
                <div className={styles.mainSection}>
                    <section className="homeCentered">
                        <ProductGallery title="Servicios destacados &#128293;" data={[]} />
                        <ProductGallery
                            title="Educacion &#x1F3C6;"
                            showViewMore={true}
                            viewMoreColor="var(--yellow)"
                            onViewMore={() => {
                                headerState.setPublicFindCategoryId(200);
                                goTo("/landing/find");
                            }}
                            data={homeData.education?.data}
                        />
                        <ProductGallery
                            title="Salud y Bienestar &#128293;"
                            showViewMore={true}
                            onViewMore={() => {
                                headerState.setPublicFindCategoryId(100);
                                goTo("/landing/find");
                            }}
                            data={homeData.health?.data}
                        />
                    </section>
                </div>
            )}

            <AnimatedContainer
                color="#ffee38"
                minSize={150}
                maxSize={500}
                items={5}
                className={styles.caminosSection}
            >
                <section className="homeCentered">
                    <Caminos />
                </section>
            </AnimatedContainer>

            {(homeData.economy?.data.length > 0 ||
                homeData.construction?.data.length > 0 ||
                homeData.other?.data.length > 0) && (
                <div className={styles.secondSection}>
                    <section className="homeCentered">
                        <ProductGallery
                            title="Otros Servicios &#128293;"
                            showViewMore={true}
                            onViewMore={() => {
                                headerState.setPublicFindCategoryId(50000);
                                goTo("/landing/find");
                            }}
                            data={homeData.other?.data}
                        />
                        <ProductGallery
                            title="Construcción y Mantenimiento &#128293;"
                            showViewMore={true}
                            onViewMore={() => {
                                headerState.setPublicFindCategoryId(400);
                                goTo("/landing/find");
                            }}
                            data={homeData.construction?.data}
                        />
                        <ProductGallery
                            title="Contabilidad &#x1F3C6;"
                            showViewMore={true}
                            onViewMore={() => {
                                headerState.setPublicFindCategoryId(300);
                                goTo("/landing/find");
                            }}
                            data={homeData.economy?.data}
                        />
                    </section>
                </div>
            )}
            <Footer />
        </div>
    );
}
