import React, { useEffect, useState } from "react";
import Link from "next/link";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/reuseables/Heading";
import { motion } from "framer-motion";
import { slideFromLeft } from "@/components/reuseables/variants";
import PageBanner from "@/components/reuseables/PageBanner";
import Image from "next/image";
import { cleanImage } from "@/layout/imageHandling";
import qs from "qs";
import axios from "axios";
import { useDispatch, useSelector } from "react-redux";
import { fetchCorpediaList } from "@/redux/slices/corpediaslice";
import ReactPaginate from "react-paginate";
import Seo from "@/components/reuseables/Seo/Seo";
import Pagination from "react-js-pagination";
import { fetchcodeList } from "@/redux/slices/mangerslice";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";

const CorpediaPage = ({ CorpediaData, conversionData }) => {
  // console.log(CorpediaData,"CorpediaData")
  const banners = [
    {
      imageSrc: cleanImage(CorpediaData?.Banner?.Image?.url),
      pageTitle: CorpediaData?.Banner?.Heading,
      homePageUrl: "/knowledge",
      homePageText: "Knowledge",
      activePageText: "Corpedia",
    },
  ];

  // corpedia list
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchCorpediaList());
    dispatch(fetchcodeList());
  }, [dispatch]);

  const corpedialist = useSelector((state) => state.corpedialist.data);
  const tagmangerlist = useSelector((state) => state.tagmangerlist.data);

  // console.log(tagmangerlist,"tagmangerlist")
  // Pagination setup
  const [currentPage, setCurrentPage] = useState(1); // Start at page 1
  const postsPerPage = 6; // Number of items per page
  const offset = (currentPage - 1) * postsPerPage; // Calculate offset
  const currentItems = corpedialist?.slice(offset, offset + postsPerPage);
  const code = conversionData?.conversion;


  // Handle page click
  const handlePageClick = (pageNumber) => {
    setCurrentPage(pageNumber); // Update current page
  };

  const seo = CorpediaData?.seo;
  // console.log(seo)

  return (
    <>
      <Seo seo={seo} />
      <ConversionCode code={code} />

      <PageBanner banners={banners} />

      <div className="corpedia-page-area pt-70 pb-100 bg-light">
        <Container>
          <div className="section-title">
            <Heading heading={CorpediaData?.Heading?.Title} className="mb-0 primary-text" />
          </div>
          
            <div dangerouslySetInnerHTML={{ __html: CorpediaData?.Heading?.Description }} />
          
          <Row className="align-items-center mt-5">
            {currentItems &&
              currentItems?.map((service, index) => (
                <Col lg={4} md={6} sm={12} key={service.id}>
                  <motion.div
                    variants={slideFromLeft(0.5)}
                    initial={"hidden"}
                    whileInView={"show"}
                    viewport={{ once: false, amount: 0.4 }}
                  >
                    <div className="services-box-budget">
                      <div className="d-flex align-items-center">
                        <Image
                          src={cleanImage(service?.Image?.url)}
                          alt={
                            service?.alternativeText
                              ? service?.alternativeText
                              : "image"
                          }
                          width={40}
                          height={40}
                          className="img-fluid me-3"
                        />
                        <h3>
                          <Link
                            href={
                              service?.slug?.endsWith(".pdf")
                                ? `https://api.advithconsulting.in/uploads/${service.slug}`
                                : `/corpedia/${
                                    service?.slug ? service.slug : "#"
                                  }`
                            }
                            target={
                              service?.slug?.endsWith(".pdf")
                                ? "_blank"
                                : "_self"
                            }
                            rel={
                              service?.slug?.endsWith(".pdf")
                                ? "noopener noreferrer"
                                : undefined
                            }
                          >
                            {service?.Title || "Default Service Name"}
                          </Link>
                        </h3>
                      </div>

                      <p>{service.Description}</p>

                      <Link
                        href={
                          service?.slug?.endsWith(".pdf")
                            ? `https://api.advithconsulting.in/uploads/${service.slug}`
                            : `/corpedia/${service?.slug ? service.slug : "#"}`
                        }
                        target={
                          service?.slug?.endsWith(".pdf") ? "_blank" : "_self"
                        }
                        rel={
                          service?.slug?.endsWith(".pdf")
                            ? "noopener noreferrer"
                            : undefined
                        }
                        className="default-btn"
                      >
                        Read More
                        <i className="ri-arrow-right-line"></i>
                      </Link>
                    </div>
                  </motion.div>
                </Col>
              ))}
          </Row>

          {/* <ReactPaginate
            previousLabel={"<<"}
            nextLabel={">>"}
            breakLabel={"..."}
            pageCount={pageCount}
            marginPagesDisplayed={2}
            pageRangeDisplayed={3}
            onPageChange={handlePageClick}
            containerClassName={"pagination custom-pagination"}
            activeClassName={"active"}
          /> */}

          {corpedialist?.length > postsPerPage && (
            <div className="custom-pagination">
              <Pagination
                activePage={currentPage}
                itemsCountPerPage={postsPerPage}
                totalItemsCount={corpedialist?.length}
                onChange={handlePageClick}
                hideNavigation={true}
                itemClass="page-item"
                linkClass="page-numbers"
                linkClassFirst="prev"
                linkClassLast="next"
              />
            </div>
          )}
        </Container>
      </div>
    </>
  );
};

export default CorpediaPage;

export const getStaticProps = async () => {
  try {
    const query1 = {
      populate: [
        "Banner.Image",
        "Heading",
        "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/corpedia-page?${query1String}`;
    const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
    // console.log(`Final url1: ${endpoint2}`);

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

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