import { Inter } from "next/font/google";
import HomeBanner from "@/container/Home/HomeBanner";
import AboutContent from "@/container/Home/AboutContent";
import People from "@/container/Home/People";
import ClientService from "@/container/Home/ClientService";
import AreasofExpertise from "@/container/Home/AreasofExpertise";
import HomeBlog from "@/container/Home/HomeBlog";
import PartnerSlider from "@/container/Home/PartnerSlider";
import CallBackRequest from "@/components/reuseables/CallBackRequest";
import qs from "qs";
import axios from "axios";
import { fetchBlogList } from "@/redux/slices/bloglistslice";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchServiceList } from "@/redux/slices/clientservice";
import Industries from "@/container/Home/Industries";
import FunctionalAreas from "@/container/Home/FunctionalAreas";
import Seo from "@/components/reuseables/Seo/Seo";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
import TechnicalExpertise from "@/container/Home/AreaofExpertise";
import Clientele from "@/components/reuseables/Clientele";

const inter = Inter({ subsets: ["latin"] });

export default function Home({ homepage, conversionData }) {
  const dispatch = useDispatch();
  console.log("homepage", homepage);
  const banner = homepage?.Banner;
  const Knowledgeshack = homepage?.Knowledgeshack;
  const KnowledgeTab = homepage?.KnowledgeTab;
  const people = homepage?.People;
  // const Areas = homepage?.AreasofExpertise;
  const functionarea = homepage?.FunctionalAreas;
  const industry = homepage?.Industry;
  const Clientel = homepage?.Clientel;
  const code = conversionData?.conversion;
  const AreasExpertiseTitle = homepage?.AreasExpertiseTitle;
  const AreasofExpertiseList = homepage?.AreasofExpertiselists;
  console.log(AreasExpertiseTitle, "AreasofExpertiselists")

  useEffect(() => {
    dispatch(fetchBlogList());
    dispatch(fetchServiceList());
  }, []);

  const blogData = useSelector((state) => state.bloglist.data);
  const serviceData = useSelector((state) => state.servicelist.data);
  // console.log(conversionData, "data");
  const seo = homepage?.seo;

  return (
    <>
      <Seo seo={seo} />
      <ConversionCode code={code} />
      <HomeBanner banner={banner} />
      <AboutContent Knowledges={Knowledgeshack} KnowledgeTab={KnowledgeTab} />
      <People people={people} />
      <ClientService service={serviceData} classname="home_client_sevices" />
      {/* <TechnicalExpertise AreasExpertiseTitle={AreasExpertiseTitle} AreasofExpertiseList={AreasofExpertiseList}/> */}
      <AreasofExpertise AreasExpertiseTitle={AreasExpertiseTitle} AreasofExpertiseList={AreasofExpertiseList} />
      <FunctionalAreas functionarea={functionarea} />
      <Industries industry={industry} />
      <HomeBlog data={blogData} />
      <div className="ptb-50 bg-fafafa">
        <Clientele partners={Clientel} />
        {/* <PartnerSlider Clientel={Clientel} /> */}
      </div>
      <CallBackRequest />
    </>
  );
}

export async function getServerSideProps() {
  try {
    const query1 = {
      populate: [
        "Banner.Mobilebanner",
        "Banner.BackgroundBanner",
        "Banner.Desktopbanner",
        "Banner.CTA",
        "Knowledgeshack.Image",
        "KnowledgeTab",
        "KnowledgeTab.CTA",
        "People.Image",
        "People.peoplelist",
        "whatwedo.Image",
        "whatwedo.CTA",
        "AreasExpertiseTitle.Heading",
        "AreasExpertiseTitle.Image",
        "AreasofExpertiselists.Image",
        "FunctionalAreas.Icon",
        "Industry.Image",
        "Industry.CTA",
        "Clientel.logos",
        "seo",
        "seo.metaImage",
        "seo.schema",
      ],
    };

    const query2 = {
      populate: ["conversion"],
    };

    const query1String = qs.stringify(query1, {
      encodeValuesOnly: true,
    });
    const query12String = qs.stringify(query2, {
      encodeValuesOnly: true,
    });

    const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/home?${query1String}`;
    const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
    // console.log(`Final url1: ${endpoint2}`);

    const [response1, response2] = await Promise.all([
      axios.get(endpoint1),
      axios.get(endpoint2),
    ]);

    const homepage = response1.data.data;
    const conversionData = response2.data.data;

    return {
      props: { homepage, conversionData },
    };
  } catch (error) {
    console.log("Error", error);
  }
}