"use client";

import Breadcrumb from "@/src/components/custom-components/breadcrumb";
import Partners from "@/src/components/relation/components/our-partners";
import { routes } from "@/src/config/routes";
import { animations } from "@/src/constants/animations";
import { blockReferences, websiteSetup } from "@/src/constants/website-setup";
import { apiEndpoints } from "@/src/server_api/config/api.endpoints";
import useApi from "@/src/server_api/hooks/use-api";
import { APIFetch } from "@/src/server_api/utils/api-fetch";
import AboutBanner from "@/src/shared-pages/about/about-banner";
import AboutGallery from "@/src/shared-pages/about/about-swiper";
import DroneDealerContent from "@/src/shared-pages/about/drone-dealer-content";
import WhyChooseDynatech from "@/src/shared-pages/about/why-choose-dynatech";

import { resolveRelation } from "@/src/server_api/utils/relation-helper";

export default function AboutPageClient() {
    const {
        data: aboutUs,
        isLoading,
        relationTargets,
    } = useApi({
        apiEndpoint: apiEndpoints.common.website_setup,
        enableFetchApi: true,
        searchParams: {
            block: websiteSetup.pages,
            blockReference: blockReferences.aboutus,
            isrelation: "1",
            random: "1",
        },
    });

    const { data: partnersData, relation: partnersRelation } = resolveRelation({
        pageData: aboutUs?.[0]?.blockValues,
        relationTargets,
        relationKey: "Partners",
    });
    const relationIds =
        aboutUs?.[0]?.blockValues?.relation?.[3]?.targets ?? [];

    const aboutUsTargets = relationTargets?.["about-us"] ?? [];

    const filteredAboutUs = aboutUsTargets.filter((item: any) =>
        relationIds.some((relation: any) => relation.id === item._id)
    );

    const InnovativePoints = aboutUs?.[0]?.blockValues?.relation?.[1]?.targets ?? [];
    const filteredInnovativePoints = aboutUsTargets?.filter((item: any) =>
        InnovativePoints?.some((relation: any) => relation.id === item._id)
    );

    console.log("filteredAboutUs", InnovativePoints, filteredInnovativePoints);

    return (
        <APIFetch
            lengthCheckObject={aboutUs}
            isLoading={isLoading}
            animatedLoading={animations.policies}
            blocks={8}
        >
            <div className="bg-white">
                <AboutBanner aboutUs={aboutUs?.[0]?.blockValues} />

                <Breadcrumb
                    items={[
                        {
                            title: "Home",
                            href: routes.home,
                        },
                        {
                            title: "About",
                        },
                    ]}
                />

                <DroneDealerContent aboutUs={aboutUs?.[0]?.blockValues} />
                <AboutGallery aboutUs={filteredAboutUs} />
                <WhyChooseDynatech
                    aboutUs={aboutUs?.[0]?.blockValues}
                    relationTargets={filteredInnovativePoints}
                />
                <Partners
                    isLoading={isLoading}
                    componentData={partnersData}
                    relation={partnersRelation}
                    pageData={aboutUs?.[0]}
                />
            </div>
        </APIFetch>
    );
}