import React, { useEffect } from "react";
import PageBanner from "@/components/reuseables/PageBanner";
import BudgetPanorama from "@/container/Knowledge/BudgetPanorama";
import Corpedia from "@/container/Knowledge/Corpedia";
import KnowledgeBlog from "@/container/Knowledge/KnowledgeBlog";
import KnowledgeContent from "@/container/Knowledge/KnowledgeContent";
import TaxWire from "@/container/Knowledge/TaxWire ";
import qs from "qs";
import axios from "axios";
import { cleanImage } from "@/layout/imageHandling";
import { useDispatch, useSelector } from "react-redux";
import { fetchBlogList } from "@/redux/slices/bloglistslice";
import { fetchCorpediaList } from "@/redux/slices/corpediaslice";
import { fetchTaxwireList } from "@/redux/slices/taxwireslice"
import { fetchBudgetList } from "@/redux/slices/budgetslice";
import Seo from "@/components/reuseables/Seo/Seo";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";



export default function Home({ Knowledgepage, conversionData }) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchBlogList());   
    dispatch(fetchCorpediaList()); 
    dispatch (fetchTaxwireList());
    dispatch(fetchBudgetList());
  }, []);

  const blogData = useSelector((state) => state.bloglist.data)
  const corpedialist = useSelector((state) => state.corpedialist.data)
  const taxwirelist = useSelector((state) => state.taxwirelist.data)
  const budgetlist = useSelector((state) => state.budgetlist.data)
  const code = conversionData?.conversion;
  // console.log(budgetlist, "budgetlist")
  // console.log("Knowledgepage", Knowledgepage);
  const Overview = Knowledgepage?.Overview
  const corpedia = Knowledgepage?.Corpedia
  const taxWire = Knowledgepage?.Taxwire
  const Budgetpanorama = Knowledgepage?.Budgetpanorama
  console.log(conversionData, "data");


  const banners = [
    {
      imageSrc: cleanImage(Knowledgepage?.Banner?.Image?.url),
      pageTitle: Knowledgepage?.Banner?.Heading,
      homePageUrl: "/",
      homePageText: "Home",
      activePageText: "KnowledgeShack",
    },
  ];


  const seo = Knowledgepage?.seo;
  // console.log(seo, 'Knowledgepage');
  // console.log(banners ,"banner")
    return (
    <>
     <Seo seo={seo} />
     <ConversionCode code={code} />

     <PageBanner banners={banners}  />
      <KnowledgeContent Overview={Overview} />
      <Corpedia Corpedia={corpedia} corpedialist={corpedialist} />
      <TaxWire taxWire={taxWire} taxwirelist={taxwirelist} />
      <BudgetPanorama Budgetpanorama={Budgetpanorama}  budgetlist={budgetlist}/>
      <KnowledgeBlog Knowledgedata={blogData} />
    </>
  );
};

export async function getServerSideProps() {
  try {
    const query1 = {
      populate: [
        "Overview.CTA",
        "Overview.Image",
        "Banner.Image",
        "Corpedia",
        "Taxwire",
        "Budgetpanorama",
        "Blogs",
        "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/knowledgeshack?${query1String}`;
     const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
    // console.log(`Final url3: ${endpoint2}`);


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

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

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