"use client";

import React, { useEffect, useState } from "react";
import "./Blog.css";
import Breadcrumb_comp from "../common-components/breadcrumb-comp/Breadcrumb_comp";
import Blog_card from "./blog_card/Blog_card";
import { useDispatch, useSelector } from "react-redux";
import { getblog } from "../../features/blog/Slice";
import Common_Heading_Holder from "../common-components/common_heading_holder/Common_Heading_Holder";
import NoData from "../Animation/no_data/NoData";

function Blog() {
  const breadcrumbs = [
    {
      label: "Home",
      link: "/",
      isActive: false,
    },
    {
      label: "Blog",
      link: "",
      isActive: true,
    },
  ];

  const [currentPage, setCurrentPage] = useState(1);

  const blog = useSelector((state) => state.blog.blog);

  const dispatch = useDispatch();

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

  const itemsPerPage = 9;

  const blogData = blog?.data || [];

  const totalPages = Math.ceil(blogData.length / itemsPerPage);

  const handlePageChange = (pageNum) => {
    if (pageNum >= 1 && pageNum <= totalPages) {
      setCurrentPage(pageNum);

      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    }
  };

  const paginatedData = blogData.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage,
  );

  return (
    <section className="Blog">
      <Breadcrumb_comp breadcrumbs={breadcrumbs} />

      <div className="container Explore_By_Categoryyy">
        {paginatedData?.length > 0 ? (
          <div className="blog_card_holder">
            <div className="blog_grid">
              {paginatedData.map((blogItem, index) => (
                <div className="blog_grid_item" key={blogItem.id || index}>
                  <Blog_card
                    baseLink={`/blog/${blogItem.id}`}
                    blogData={blogItem}
                  />
                </div>
              ))}
            </div>

            {totalPages > 1 && (
              <div className="pagination_holder">
                <button
                  onClick={() => handlePageChange(1)}
                  disabled={currentPage === 1}
                >
                  &laquo;
                </button>

                <button
                  onClick={() => handlePageChange(currentPage - 1)}
                  disabled={currentPage === 1}
                >
                  &lsaquo;
                </button>

                <button className="active">{currentPage}</button>

                {totalPages > 3 && (
                  <>
                    <span>...</span>

                    <button
                      onClick={() => handlePageChange(totalPages)}
                      className={currentPage === totalPages ? "active" : ""}
                    >
                      {totalPages}
                    </button>
                  </>
                )}

                <button
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={currentPage === totalPages}
                >
                  &rsaquo;
                </button>

                <button
                  onClick={() => handlePageChange(totalPages)}
                  disabled={currentPage === totalPages}
                >
                  &raquo;
                </button>
              </div>
            )}
          </div>
        ) : (
          <div className="no_product_found">
            <NoData />

            <h3>No Blogs Found</h3>
          </div>
        )}
      </div>
    </section>
  );
}

export default Blog;
