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 { cleanImage } from "@/layout/imageHandling";
import qs from "qs";
import axios from "axios";
import { fetchIndustryList } from "@/redux/slices/industryslice";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
import WhatWeDo from "@/components/reuseables/WhatWeDo";
import Overview from "@/container/VirtualOffice/Overview";
import Finance from "@/container/VirtualOffice/Finance";
import CTABanner from "@/components/reuseables/CTABanner";
import Seo from "@/components/reuseables/Seo/Seo";
import PartnerSlider from "@/container/Home/PartnerSlider";
import HomeBlog from "@/container/Home/HomeBlog";
import { fetchBlogList } from "@/redux/slices/bloglistslice";

const VirtualFinanceOfficePage = ({ ClientPage, conversionData, title }) => {
  // console.log(ClientPage, "data1");
  const banners = [
    {
      imageSrc: cleanImage(ClientPage?.Banner?.Image?.url),
      pageTitle: ClientPage?.Banner?.Heading,
      homePageUrl: "/",
      homePageText: "Home",
      activePageText: ClientPage?.Banner?.Heading,
    },
  ];

  const overview = ClientPage?.Overview;
  const PyramidofFinance = ClientPage?.PyramidofFinance;
  const serviceData = ClientPage?.whatwedo;
  const serviceHeading = ClientPage?.whatwedoheading;
  const CtaBanner = ClientPage?.CTABanner;

  console.log(CtaBanner, "CTABanner");

  const dispatch = useDispatch();
  useEffect(() => {
    // dispatch(fetchServiceList());
    dispatch(fetchBlogList());
    dispatch(fetchIndustryList());
    // dispatch(fetchFunctionArea());
  }, []);

  const blogData = useSelector((state) => state.bloglist.data);
  const IndustryData = useSelector((state) => state.industrylist.data);
  const seo = ClientPage?.seo;
  const code = conversionData?.conversion;
  const Clientel = ClientPage?.Clientel;

  return (
    <>
      <Seo seo={seo} />
      <PageBanner banners={banners} />

      <ConversionCode code={code} />

      <Overview overview={overview} />

      <WhatWeDo service={serviceData} serviceheading={serviceHeading} />
      <Finance finance={PyramidofFinance} />
      <CTABanner cta={CtaBanner} />
      {/* <OurService /> */}
      {/* <TechnicalExpertise technicalexpertise={technicalexpertise} /> */}
      {/* <FunctionalAreas functionarea={FunctionArea} /> */}
      <div className="ptb-100 bg-fafafa">
        <PartnerSlider Clientel={Clientel} />
      </div>
      <Industries industry={IndustryData} />
      <HomeBlog data={blogData} />
      <CallBackRequest />
    </>
  );
};

export default VirtualFinanceOfficePage;

export async function getServerSideProps() {
  try {
    const query1 = {
      populate: [
        "Banner",
        "Banner.Image",
        "whatwedoheading",
        "whatwedo",
        "whatwedo.Image",
        "whatwedo.CTA",
        "Overview",
        "Overview.CTA",
        "PyramidofFinance.Image",
        "CTABanner.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/virtual-finance-office-page?${query1String}`;
    const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;

    console.log(`Final url virtual finace: ${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);
  }
}