import React from "react";
import PageBanner from "@/components/reuseables/PageBanner";
import FunctionalAreas from "../../components/reuseables/FunctionalAreas";
import Industries from "@/components/reuseables/Industries";
import CallBackRequest from "@/components/reuseables/CallBackRequest";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchServiceList } from "@/redux/slices/clientservice";
import { cleanImage } from "@/layout/imageHandling";
import qs from "qs";
import axios from "axios";
import { fetchIndustryList } from "@/redux/slices/industryslice";
import { fetchFunctionArea } from "@/redux/slices/functionareaslice";
import TechnicalExpertise from "@/container/ClientServicing/ TechnicalExpertise";
import ClientService from "@/container/Home/ClientService";



const ClientServicingPage = ({ ClientPage }) => {
  // console.log(ClientPage, "data1");

  const banners = [
    {
      imageSrc: cleanImage(ClientPage?.Banner?.Image?.url),
      pageTitle: ClientPage?.Banner?.Heading,
      homePageUrl: "/",
      homePageText: "Home",
      activePageText: ClientPage?.Banner?.Heading,
    },
    // Add more banners as needed
  ];

  const technicalexpertise = ClientPage?.Technicalexpertise;
  // console.log(technicalexpertise,"technicalexpertise")

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchServiceList());
    dispatch(fetchIndustryList());
    dispatch(fetchFunctionArea());
  }, []);
  
  const serviceData = useSelector((state) => state.servicelist.data)
  const IndustryData = useSelector((state) => state.industrylist.data)
  const FunctionArea = useSelector((state) => state.functionarea.data)

  // console.log(FunctionArea, "data")
  const seo = ClientPage?.seo;


  return (
    <> 
      <PageBanner banners={banners} />
      <ClientService service={serviceData}  />
      {/* <OurService /> */}
      <TechnicalExpertise technicalexpertise={technicalexpertise}/>
      <FunctionalAreas  functionarea={FunctionArea} />
      <Industries industry={IndustryData} />
      <CallBackRequest />
    </>
  );
};

export default ClientServicingPage;


export async function getServerSideProps() {
  try {
    const query1 = {
      populate: [
       "Banner",
       "Banner.Image",
       "Technicalexpertise",
       "Technicalexpertise.Technicallist"
       
      ],
    };

    const query1String = qs.stringify(query1, {
      encodeValuesOnly: true,
    });

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

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

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