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 { useDispatch, useSelector } from "react-redux";
import { fetchBudgetList } from "@/redux/slices/budgetslice";
import { cleanImage } from "@/layout/imageHandling";

import qs from "qs";
import axios from "axios";
import ReactPaginate from "react-paginate";
import Seo from "@/components/reuseables/Seo/Seo";
import Pagination from "react-js-pagination";

// const services = [
//   {
//     id: 1,
//     serviceTitle: "Budget Panorama - 2024",
//     serviceShortDescription: "Advith Consulting is a seasoned business consulting firm with nearly 40 years of experience. The firm is led by a core team of highly experienced professionals with sound knowledge in their area of expertise.",
//     serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Budget-Panorama-2024.pdf",
//     date: "31 Jul 2024",
//   },
//   {
//     id: 2,
//     serviceTitle: "Budget Panorama - 2023",
//     serviceShortDescription: "Advith Consulting is a business consulting firm with almost 40 years of experience on its resume. We provide a myriad of business consulting services in the fields of Direct tax, Indirect tax, Outsourcing (CFO services, Accounts, Payroll & Compliance Management), Corporate law & Advisory among others.",
//     serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Budget-Panorama-2023.pdf",
//     date: "10 Feb 2023",
//   },
//   {
//     id: 3,
//     serviceTitle: "Budget Panorama - 2022",
//     serviceShortDescription: "Amidst the growing worry due to the 3rd Covid wave, in particular the Omicron wave, the Hon'ble Finance Minister of India (FM) presented the Budget 2022 on 1st February 2022. The Economic Survey which was tabled before the India Parliament indicated a real GDP expansion of 9.2% in 2021-22, which showed a faster recovery of the economy after it contracted in FY 2020-21. This a positive sign and also shows the resilience that the Indian economy inherently has.",
//     serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Budget-Panorama-2022.pdf",
//     date: "09 Feb 2022",
//   },
//   {
//     id: 4,
//     serviceTitle: "Budget - 2021",
//     serviceShortDescription: "The Hon'ble Finance Minister presented the Budget 2021 under circumstances which were unprecedented. The outbreak of pandemic and its negative impact was felt around the world and India was no exception. The lockdown that was announced to contain the spread of virus and its impact on the economy was brutal. The FM had a very difcult job to do, to present the Budget in such a backdrop. ",
//     serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Budget-2021.pdf",
//     date: "23 Aug 2021",
//   },
//   {
//     id: 5,
//     serviceTitle: "Budget - 2020",
//     serviceShortDescription: "India witnessed a very sluggish economy in the last one year. The job growth was limited, some sectors like real estate and auto went in for a very rough phase with negative growth. In order to arrest some of these negative factors and to bring back positive sentiments, the Government made quite a few big bang announcements without waiting for the budget. Such announcements did help the ",
//     serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Budget-2020.pdf",
//     date: "20 Aug 2021",
//   },
//   {
//     id: 6,
//     serviceTitle: "Final Budget - 2019",
//     serviceShortDescription: "With an astounding victory, team Modi 2.0 was elected back to power. In this background, it was very well known that this will not be a populist budget, but it would be a development oriented one. True to such expectations, Mrs.Nirmala Sitharaman presented her maiden budget on 5th July, 2019. ",
//     serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Final-Budget-2019.pdf",
//     date: "12 Jul 2019",
//   },
//   {
//     id: 7,
//     serviceTitle: "Interim Budget - 2019",
//     serviceShortDescription: "The Finance Minister Sri Piyush Goyal presented an Interim Union Budget, 2019 on 1st February, 2019. Being an election year, the interim budget was keenly watched to see if the Government will tend to become populist and ignore scal prudence or will they stick to scal discipline. To a large extent, the Finance Minister has done a great ",
//     serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/PDF1629874052.pdf",
//     date: "11 Feb 2019",
//   },
//   {
//     id: 8,
//     serviceTitle: "Budget - 2018",
//     serviceShortDescription: "Advith Consulting is a multi-disciplinary consulting Firm providing professional services in the areas of book keeping, taxation, corporate law, transaction advisory, process consulting and the like. Our client base spans over various industry verticals such as hospitality, manufacturing, ",
//     serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Interim-Budget-2019.pdf",
//     date: "12 Jun 2018",
//   },
//   {
//     id: 9,
//     serviceTitle: "Budget - 2017",
//     serviceShortDescription: "This year, Indian economy saw a lot of transitional activity. While we still want to believe that we are a bright spot in the global economy, the economic parameters are increasingly showing mixed signs. Increasing unemployment emerged as the biggest problem;",
//     serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Budget-2017.pdf",
//     date: "12 Jun 2017",
//   },
//   {
//     id: 10,
//     serviceTitle: "Budget - 2016",
//     serviceShortDescription: "An independent yet global economy is an ideal situation that each country tries to achieve. With global economic slowdown, mounting social unrest, terrorism and border disputes, each country is trying more innovative ways to achieve a fine balance of globalisation and ",
//     serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Budget-2016.pdf",
//     date: "12 Jun 2016",
//   },
// ];

const BudgetPanorama = ({ BudgetData }) => {
  const banners = [
    {
      imageSrc: cleanImage(BudgetData?.Banner?.Image?.url),
      pageTitle: BudgetData?.Banner?.Heading,
      homePageUrl: "/knowledge",
      homePageText: "knowledge",
      activePageText: BudgetData?.Banner?.Heading,
    },
  ];
  const dispatch = useDispatch();

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

  const budgetlist = useSelector((state) => state.budgetlist.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 = budgetlist?.slice(offset, offset + postsPerPage);

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

  const seo = BudgetData?.seo;
  console.log(seo);
  return (
    <>
      <Seo seo={seo} />
      <PageBanner banners={banners} />
      <div className="budget-panorama-page-area pt-70 pb-100 bg-light">
        <Container>
          <div className="section-title">
            <Heading heading={BudgetData?.Heading?.Title} el="h2" />
          </div>
          <p className="text-center mb-3 mb-lg-5">
            {BudgetData?.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}`
                                : `/budgetpanorama/${
                                    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}`
                            : `/budgetpanorama/${
                                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>

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

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

export default BudgetPanorama;

export async function getServerSideProps() {
  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/budget-page?${query1String}`;
    // console.log(`Final url: ${endpoint1}`);

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

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