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

// const services = [
//   {
//     id: 1,
//     serviceTitle: "Karnataka Compulsory Gratuity Insurance Rules, 2024",
//     serviceShortDescription:
//       "Gratuity is a monetary compensation payable by an employer to employees who have rendered 5 or more years of continuous service to an organization and retires or quits the organization",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/Karnataka_Compulsory_Gratuity_Insurance_Rules,_2024.pdf",
//     date: "15 Feb 2024",
//   },
//   {
//     id: 2,
//     serviceTitle: "Recent amendment in Companies and LLP Act in India",
//     serviceShortDescription:
//       "Recently, the Ministry of Corporate Affairs came out with certain amendments concerning dematerilisation of shares of private limited companies, the issue of warrants by companies, certain administrative matters, and additional compliances applicable to Limited Liability Partnerships (LLP).",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/Recent_amendment_in_Companies_and_LLP_Act_in_India.pdf",
//     date: "16 Nov 2023",
//   },
//   {
//     id: 3,
//     serviceTitle: "Recent Amendments relating to Accounts and Audit under Companies Act, 2013",
//     serviceShortDescription:
//       "Recently, the Ministry of Corporate Affairs came out with certain amendments which impact the maintenance of accounts, reporting and preparation of financial statements.",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/Recent_Amendments_relating_to_Accounts_and_Audit_under_Companies_Act,_2013.pdf",
//     date: "18 Aug 2021",
//   },
//   {
//     id: 4,
//     serviceTitle: "The Companies (Corporate Social Responsibility Policy) Amendment Rules, 2021",
//     serviceShortDescription:
//       "The Company law in India mandates certain category of companies to carry out Corporate Social Responsibility (CSR) activities mandatorily. ",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/The_Companies_(Corporate_Social_Responsibility_Policy)_Amendment_Rules,_2021.pdf",
//     date: "28 Jan 2021",
//   },
//   {
//     id: 5,
//     serviceTitle: "Company and LLP – Amnesty Schemes",
//     serviceShortDescription:
//       "Ministry of Corporate Affairs (MCA), in order to encourage Companies and Limited Liability Partnerships (LLPs) to come clean on all the non-compliances",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/Company_and_LLP_Amnesty_Schemes.pdf",
//     date: "04 Apr 2020",
//   },
//   {
//     id: 6,
//     serviceTitle: "ESI contribution rates reduced",
//     serviceShortDescription:
//       "The Employees’ State Insurance Corporation (ESIC), a statutory body, is set up under the Employees’ State Insurance (ESI) Act, 1948.",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/ESI_contribution_rates_reduced.pdf",
//     date: "24 Jun 2019",
//   },
//   {
//     id: 7,
//     serviceTitle: "Condonation of Delay Scheme 2018",
//     serviceShortDescription:
//       "As per provisions of Companies Act, 2013 companies which are registered under the Act (or erstwhile Companies act, 1956) are required to file their Annual financial statements ",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/Condonation_of_Delay_Scheme_2018.pdf",
//     date: "06 Jan 2018",
//   },
//   {
//     id: 8,
//     serviceTitle: "ESIC – Background & Recent Amendments",
//     serviceShortDescription:
//       "ESIC stands for Employees' State Insurance Corporation also called as The Karmachari Rajya Bima Nigam. Employees’ State Insurance Act, 1948 envisaged an integrated need based social insurance scheme that",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/ESIC_Background_&_Recent_Amendments.pdf",
//     date: "11 Jan 2017",
//   },
//   {
//     id: 9,
//     serviceTitle: "The Master Stroke",
//     serviceShortDescription:
//       "India is the fastest growing major economy in the world. The Indian economy is the seventh-largest in the world measured by nominal GDP and the third - largest by purchasing power parity (PPP).",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/The_Master_Stroke.pdf",
//     date: "10 Nov 2016",
//   },
//   {
//     id: 10,
//     serviceTitle: "Startup India Initiative – A Glimpse",
//     serviceShortDescription:
//       "The new buzzwords in the world today are startup, investor and valuation. increased entrepreneurial focus, backed by strong fund houses",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/Startup_India_Initiative_A_Glimpse.pdf",
//     date: "30 Apr 2016",
//   },
//   {
//     id: 11,
//     serviceTitle: "The Companies (Accounting Standard) Amendment Rule, 2016",
//     serviceShortDescription:
//       "The Companies Act, 2013 in provisions 128 requires every company to maintain books of account on accrual basis and according to double entry system",
//     serviceDetailsUrl: "/images/knoweledge/pdf/corpedia/The_Companies_(Accounting_Standard)_Amendment_Rule,_2016.pdf",
//     date: "18 Apr 2016",
//   },
// ];

const CorpediaPage = ({ CorpediaData }) => {
  // 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]);

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

  // 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);

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

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

  return (
    <>
      <Seo seo={seo} />
      <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" />
          </div>
          <p className="text-center mb-3 mb-lg-5">
            {CorpediaData?.Heading?.Description}
          </p>
          <Row className="align-items-center">
            {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 query1String = qs.stringify(query1, {
      encodeValuesOnly: true,
    });

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

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

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