import React, { useEffect, useState } from "react";

import Image from "next/image";
import PageBanner from "@/components/reuseables/PageBanner";
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 Link from "next/link";
import { useDispatch, useSelector } from "react-redux";
import { fetchTaxwireList } from "@/redux/slices/taxwireslice";
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";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";

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

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchTaxwireList());
  }, []);

  const taxwirelist = useSelector((state) => state.taxwirelist.data);
  const code = conversionData?.conversion;
  const seo = TaxwireData?.seo;
   // Pagination setup
   const [currentPage, setCurrentPage] = useState(1); 
   const postsPerPage = 6; 
   const offset = (currentPage - 1) * postsPerPage; 
   const currentItems = taxwirelist?.slice(offset, offset + postsPerPage);
   const handlePageClick = (pageNumber) => {
     setCurrentPage(pageNumber); 
   };
 

  

  return (
    <>
      <Seo seo={seo} />
      <ConversionCode code={code} />
      <PageBanner banners={banners} />
      
      <div className="tax-wire-page-area pt-70 pb-100 bg-light ">
        <Container>
          <div className="section-title">
            <Heading heading={TaxwireData?.Heading?.Title} el="h2" />
          </div>
          <p className="text-center mb-3 mb-lg-5 ">
            {TaxwireData?.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}`
                                : `/taxwire/${
                                    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}`
                            : `/taxwire/${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"}
          /> */}


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

        </Container>
      </div>
    </>
  );
};

export default TaxWire;

export async function getServerSideProps() {
  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/taxwire-page?${query1String}`;
    const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
    console.log(`Final url: ${endpoint2}`);

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

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