import { fetchBlogList } from "@/redux/slices/bloglistslice";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { cleanImage } from "@/layout/imageHandling";
import ReactPaginate from "react-paginate";
import PageBanner from "@/components/reuseables/PageBanner";
import { Col, Container, Row } from "react-bootstrap";
import Link from "next/link";
import Image from "next/image";
import qs from "qs";
import axios from "axios";
import Seo from "@/components/reuseables/Seo/Seo";
import Pagination from "react-js-pagination";


const blogs = ({Blogpage }) => {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(fetchBlogList())
  }, []);

  const blogData = useSelector((state) => state.bloglist.data)


  // Pagination setup
  const [currentPage, setCurrentPage] = useState(1); // Start at page 1
  const postsPerPage = 3; // Number of items per page
  const offset = (currentPage - 1) * postsPerPage; // Calculate offset
  const currentItems = blogData?.slice(offset, offset + postsPerPage);

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


  const banners = [
    {
      imageSrc: cleanImage(Blogpage?.Banner?.Image?.url),
      pageTitle: Blogpage?.Banner?.Heading,
      homePageUrl: "/",
      homePageText: "Home",
      activePageText: "Blogs",
    },
  ];
  

  const seo = Blogpage?.seo;
  // console.log(seo, 'Blogpage');

  return (
 

      <>
      <Seo seo={seo} />
      <PageBanner banners={banners} />
      <div className="blog-area ptb-100">
        <Container>
          <Row className="g-4">
            <Col lg={12} md={12}>
              <div className="row justify-content-center h-100">
                {currentItems &&
                  currentItems.map((post, index) => (
                    <Col lg={4} md={4} key={index}>
                      <div className="single-blog-post">
                        <div className="post-image">
                          <Link href={`/blog/${post?.slug}`} className="d-block">
                            <Image
                              layout="fill"
                              src={cleanImage(post?.ThumbnailImage?.url)}
                              alt={post?.ThumbnailImage?.alternativeText || "Blog Image"}
                              className="img-fluid image"
                            />
                          </Link>
                        </div>
                        <div className="post-content">
                          <ul className="meta">
                            <li>
                              <i className="ri-calendar-2-line"></i> {post?.Date}
                            </li>
                            <li>
                              <i className="ri-user-voice-line"></i> {post?.Author}
                            </li>
                          </ul>
                          <h3>
                            <Link href={`/blog/${post?.slug}`}>{post.Title}</Link>
                          </h3>
                          <p>{post.shortDescription}</p>
                          <Link href={`/blog/${post?.slug}`} className="default-btn">
                            Read More <i className="ri-arrow-right-line"></i>
                          </Link>
                        </div>
                      </div>
                    </Col>
                  ))}
              </div>
            </Col>
          </Row>

          {/* Pagination */}
          {/* <ReactPaginate
            previousLabel={"<<"}
            nextLabel={">>"}
            breakLabel={"..."}
            pageCount={Math.ceil(blogData.length / postsPerPage)}
            marginPagesDisplayed={2}
            pageRangeDisplayed={3}
            onPageChange={handlePageClick}
            containerClassName={"pagination custom-pagination"}
            activeClassName={"active"}
          /> */}

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

        </Container>
      </div>

    </>
  );
};

export default blogs;



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

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

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

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

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