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";



export default function Home({ Knowledgepage }) {
  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)

  // console.log(budgetlist, "budgetlist")
  // console.log("Knowledgepage", Knowledgepage);
  const Overview = Knowledgepage?.Overview
  const corpedia = Knowledgepage?.Corpedia
  const taxWire = Knowledgepage?.Taxwire
  const Budgetpanorama = Knowledgepage?.Budgetpanorama

  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} />
     <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 query1String = qs.stringify(query1, {
      encodeValuesOnly: true,
    });

    const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/knowledgeshack?${query1String}`;
    // console.log(`Final url: ${endpoint1}`);

    const response1 = await axios.get(endpoint1);
    const Knowledgepage = response1.data.data;

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