import React from "react";
import PageBanner from "@/components/reuseables/PageBanner";
import Industries from "@/components/reuseables/Industries";
import CallBackRequest from "@/components/reuseables/CallBackRequest";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchServiceList } from "@/redux/slices/clientservice";
import { cleanImage } from "@/layout/imageHandling";
import qs from "qs";
import axios from "axios";
import { fetchIndustryList } from "@/redux/slices/industryslice";
import { fetchFunctionArea } from "@/redux/slices/functionareaslice";
import TechnicalExpertise from "@/container/ClientServicing/ TechnicalExpertise";
import ClientService from "@/container/Home/ClientService";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
import FunctionalAreas from "@/components/reuseables/FunctionalAreas";



const VirtualFinanceOfficePage = ({ ClientPage , conversionData }) => {
  // console.log(ClientPage, "data1");

  const banners = [
    {
      imageSrc: cleanImage(ClientPage?.Banner?.Image?.url),
      pageTitle: ClientPage?.Banner?.Heading,
      homePageUrl: "/",
      homePageText: "Home",
      activePageText: ClientPage?.Banner?.Heading,
    },
    // Add more banners as needed
  ];

  const technicalexpertise = ClientPage?.Technicalexpertise;
  // console.log(technicalexpertise,"technicalexpertise")

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchServiceList());
    dispatch(fetchIndustryList());
    dispatch(fetchFunctionArea());
  }, []);
  
  const serviceData = useSelector((state) => state.servicelist.data)
  const IndustryData = useSelector((state) => state.industrylist.data)
  const FunctionArea = useSelector((state) => state.functionarea.data)

  // console.log(FunctionArea, "data")
  const seo = ClientPage?.seo;
  const code = conversionData?.conversion;


  return (
    <> 
      <PageBanner banners={banners} />
      <ConversionCode code={code} />

      <ClientService service={serviceData}  />
      {/* <OurService /> */}
      <TechnicalExpertise technicalexpertise={technicalexpertise}/>
      <FunctionalAreas  functionarea={FunctionArea} />
      <Industries industry={IndustryData} />
      <CallBackRequest />
    </>
  );
};

export default VirtualFinanceOfficePage;


export async function getServerSideProps() {
  try {
    const query1 = {
      populate: [
       "Banner",
       "Banner.Image",
      //  "Technicalexpertise",
      //  "Technicalexpertise.Technicallist"
       
      ],
    };

    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/virtual-finance-office-page?${query1String}`;
    const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
    
    console.log(`Final url: ${endpoint1}`);

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

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