import type { NextPage } from 'next';
import dynamic from 'next/dynamic';

import StrapiSeo from '@/components/common/seo/StrapiSeo';
import { fetchSingleTypePageData, fetchStaticCountryPageData } from '@/helpers/utilities/fetchAPI';
import Home from '@/components/home/Home';
import {
    CountryPageSeoLinks,
    SEONavigationFooterLinks,
    SEONavigationHeaderLinks,
} from '@/helpers/utilities/linkGenerationUtil';
// const Home = dynamic(() => import('components/home/Home'));

const populateFields = [
    'seo.ogImage',
    'seo.multiStructureData',
    'companyDetail.image',
    'exploreOurWork.workingOn.logo',
    'exploreOurWork.workingOn.tabBar',
    'brandLogo.logo',
    'flexibleWork.image',
    'about.image',
    'hire.frameworks.icon',
    'about.servicesCard.icon',
    'about.devServices.logo',
    'testimonial.review.profileImage',
    'digitalAlly.content.icon',
    'digitalAlly.content.image',
    'serviceProvider.techLogo',
    'treasureTrove.logo',
    'treasureTrove.image',
    'treasureTrove.icon',
    'grow.heroCard.icon',
    'clients.brandLogos.brands.logo',
];

const footerPopulateFields = ['logo', 'addresses.image', 'phoneNumber', 'email', 'social.icon', 'policy'];

const headerPopulateFields = ['logo', 'media', 'phoneNumbers.flag', 'emails'];

export async function getStaticProps() {
    // Fetch home page data
    const homeData = await fetchSingleTypePageData(populateFields, 'home');

    // Fetch Header Data

    const headerData = await fetchSingleTypePageData(headerPopulateFields, 'header');

    // Fetch Footer Data

    const footerData = await fetchSingleTypePageData(footerPopulateFields, 'main-footer');

    // Fetch paginated data for India, UAE, and USA pages

    const countryPagesData = await fetchStaticCountryPageData();

    return {
        props: {
            homePageData: homeData?.props?.data || null,
            seoHeaderData: headerData?.props?.data || null,
            seoFooterData: footerData?.props?.data || null,
            seoCountryData: countryPagesData?.props?.pagesData || null,
        },
    };
}

const HomePage: NextPage = ({ homePageData, seoCountryData, seoHeaderData, seoFooterData }: any) => {
    return (
        <>
            <StrapiSeo content={homePageData?.data?.attributes?.seo} />
            <Home data={homePageData?.data?.attributes} />
            <CountryPageSeoLinks pagesData={seoCountryData} />
            <SEONavigationHeaderLinks headerData={seoHeaderData?.data?.attributes} />
            <SEONavigationFooterLinks footerData={seoFooterData?.data?.attributes} />
        </>
    );
};

export default HomePage;