import PageBanner from "@/components/reuseables/PageBanner";
import MethodOne from "@/components/reuseables/services/MethodOne";
import MethodTwoSection from "@/components/reuseables/services/MethodTwo";
import Clientele from "@/components/reuseables/Clientele";
import qs from "qs";
import axios from "axios";
import { cleanImage } from "@/layout/imageHandling";
import LeftSideImage from "@/container/Corpedia/LeftSideImage";
import RightSideImage from "@/container/Corpedia/RightSideImage";
import Seo from "@/components/reuseables/Seo/Seo";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
import DownloadBtn from "@/components/reuseables/DownloadBtn";
import CallBackRequest from "@/components/reuseables/CallBackRequest";
import FaqContent from "@/components/reuseables/Faq";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import HomeBlog from "@/container/Home/HomeBlog";
import { fetchBlogList } from "@/redux/slices/bloglistslice";
import WeOffer from "@/container/ClientServicing/EmpoweringFinanceConsultants/WeOffer";
import DigitalHowWeDoIt from "@/container/ClientServicing/DigitalTransformation/DigitalHowWeDoIt";
import WhatWeDoWhatDontDo from "@/container/ClientServicing/EmpoweringFinanceConsultants/WhatWeDoWhatDontDo";
import HowWeDoIt from "@/container/ClientServicing/CFO/HowWeDoIt";

const EmpoweringFinanceConsultants = ({ Empoweringpage, conversionData }) => {
  const dispatch = useDispatch();
  // console.log(Empoweringpage, "Empoweringpage");
  const banners = [
    {
      imageSrc: cleanImage(Empoweringpage?.Banner?.Image?.url),
      pageTitle: Empoweringpage?.Banner?.Heading,
      homePageUrl: "/",
      homePageText: "Home",
      activePageText: Empoweringpage?.Banner?.Heading,
      Description: Empoweringpage?.Banner?.Description,
    },
  ];

  const dynamicdata = Empoweringpage?.EmpoweringFinanceDetails;
  // console.log("dynamicdata", dynamicdata);

  const clientlogo = Empoweringpage?.Clientel;

  const seo = Empoweringpage?.seo;

  const code = conversionData?.conversion;

  // ===== Blog data =====
  useEffect(() => {
    dispatch(fetchBlogList());
  }, []);

  const blogData = useSelector((state) => state.bloglist.data);

  return (
    <>
      <Seo seo={seo} />
      <ConversionCode code={code} />
      <PageBanner banners={banners} />
      <div className="cfo-services-area ">
        <section className="cfo-page">
          {dynamicdata &&
            dynamicdata?.map((section, index) => {
              console.log("sectionemp", section);
              switch (section.__component) {
                case "dynamic-zone.about":
                  return (
                    <LeftSideImage
                      title={section?.Title}
                      subtitle={section?.Subtitle}
                      image={section?.Image}
                      content={section?.Content}
                    />
                  );
                case "dynamic-zone.background":
                  return (
                    <RightSideImage
                      title={section?.Title}
                      subtitle={section?.Subtitle}
                      image={section?.Image}
                      content={section?.Content}
                    />
                  );
                // case "dynamic-zone.card":
                //   return (
                //     <WeOffer
                //       heading={section?.Heading}
                //       data={section?.carddetails}
                //     />
                //   );



                case "dynamic-zone.image":
                  return (
                    <>
                      <DigitalHowWeDoIt
                        heading={section?.Heading}
                        desktopImage={section?.DesktopImg}
                        mobileImage={section?.MobileImg}
                      />
                    </>
                  );
                case "dynamic-zone.what-wedo-banner":
                  return (
                    <>
                      <WhatWeDoWhatDontDo
                        heading={section?.Heading}
                        data={section?.list}
                        image={section?.BackgroundBanner}
                        cta={section.CTA}
                      />
                    </>
                  );
                case "dynamic-zone.element-one":
                  return (
                    <MethodOne
                      heading={section?.Heading}
                      data={section?.ElementList}
                    />
                  );
                case "dynamic-zone.element-two":
                  return (
                    <MethodTwoSection
                      heading={section?.Heading}
                      data={section?.ElementList}
                    />
                  );
                case "dynamic-zone.download-btn":
                  return (
                    <DownloadBtn
                      subtitle={section?.Subtitle}
                      title={section?.Title}
                      description={section?.Description}
                      cta={section.CTA}
                    />
                  );
                case "dynamic-zone.faq":
                  return (
                    <FaqContent
                      title={section?.Title}
                      data={section?.FAQList}
                    />
                  );
                case "dynamic-zone.card":
                  return (
                    <>
                      <HowWeDoIt
                        heading={section?.Heading}
                        data={section} classname="empowering_howitwork"
                      />
                    </>
                  );

                default:
                  return null;
              }
            })}
        </section>
      </div>

      <div className="ptb-50">
        <Clientele partners={clientlogo} />
      </div>
      <HomeBlog data={blogData} />
      <CallBackRequest />
    </>
  );
};

export default EmpoweringFinanceConsultants;

export async function getServerSideProps() {
  try {
    const query1 = {
      populate: [
        "Banner",
        "Banner.Image",
        "EmpoweringFinanceDetails",
        "EmpoweringFinanceDetails.Image",
        "EmpoweringFinanceDetails.Heading",
        "EmpoweringFinanceDetails.DownloadBtn",
        "EmpoweringFinanceDetails.CTA",
        "EmpoweringFinanceDetails.ElementList.StepImg",
        "EmpoweringFinanceDetails.carddetails",
        "EmpoweringFinanceDetails.carddetails.Image",
        "EmpoweringFinanceDetails.DesktopImg",
        "EmpoweringFinanceDetails.MobileImg",
        "EmpoweringFinanceDetails.list",
        "EmpoweringFinanceDetails.BackgroundBanner",
        "Clientel.logos",
        "EmpoweringFinanceDetails.FAQList",
        // "FAQ.FAQList",
        "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/empowering-finance-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 Empoweringpage = response1.data.data;
    const conversionData = response2.data.data;

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