import React from "react";
import PageBanner from "@/components/reuseables/PageBanner";
import Background from "@/container/Corpedia/Background";
import Facts from "@/container/Corpedia/Facts";
import KeyFeature from "@/container/Corpedia/KeyFeature";
import Rules from "@/container/Corpedia/Rules";
import qs from "qs";
import axios from "axios";
import LeftSideImage from "@/container/Corpedia/LeftSideImage";
import RightSideImage from "@/container/Corpedia/RightSideImage";
import TableData from "@/components/reuseables/services/TableData";
import Details from "@/components/reuseables/services/Details";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";

const details = ({ Budget, conversionData }) => {
  const introDeatils = Budget;
  const dynamicdata = Budget[0]?.BudgetDeatils;
  // console.log("dynamicdata", dynamicdata);
  const banners = [
    {
      imageSrc: "/images/page-title-bg.jpg",
      pageTitle: Budget[0]?.Title || "Default Title",
      homePageUrl: "/",
      homePageText: "Home",
      activePageText: "Corpedia - Details",
    },
    // Add more banners as needed
  ];
  const code = conversionData?.conversion;


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

      <Background introdeatils={introDeatils} />
      <section className="corpedia-details-page">
        {dynamicdata &&
          dynamicdata?.map((section, index) => {
            // console.log("section", 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.rules-application":
                return (
                  <Rules
                    title={section?.Heading}
                    subtitle={section?.Subheading}
                    description={section?.Description}
                    image={section?.Image}
                    rule={section?.RuleList}
                  />
                );
              case "dynamic-zone.facts":
                return (
                  <Facts
                    title={section?.Title}
                    subtitle={section?.Subtitle}
                    factlist={section.FactList}
                  />
                );
              case "dynamic-zone.keyfeature":
                return (
                  <KeyFeature
                    title={section?.sectionTitle}
                    subtitle={section?.SectionSubtitle}
                    featurelist={section.KeyFeatureList}
                  />
                );
              case "dynamic-zone.table":
                return <TableData data={section?.tableData} />;
              case "dynamic-zone.details":
                return <Details details={section?.Details} />;

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

export default details;

export async function getServerSideProps({ params }) {
  console.log("params", params);
  try {
    const query1 = {
      populate: [
        "Image",
        "BudgetDeatils.LeftsideImg.Image",
        "BudgetDeatils.Image",
        "BudgetDeatils.RuleList",
        "BudgetDeatils.FactList.Icon",
        "BudgetDeatils.KeyFeatureList.Icon",
      ],
      filters: {
        slug: {
          $eq: params?.corpediaslug,
        },
      },
    };
    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/budgetpanoramas?${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 Budget = response1.data.data;
    const conversionData = response2.data.data;


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