import React, { useState, useEffect } from "react";
import styles from "./pagination.module.css";
import PropTypes from "prop-types";

function Pagination({ total, currentPage, onPageChange }) {
  //Set number of pages
  const numberOfPages = [];
  const totalPage = total <= 1 ? 1 : total;
  for (let i = 1; i <= totalPage; i++) {
    numberOfPages.push(i);
  }

  // Current active button number
  const [currentButton, setCurrentButton] = useState(1);

  // Array of buttons what we see on the page
  const [arrOfCurrButtons, setArrOfCurrButtons] = useState([]);
  useEffect(() => {
    let tempNumberOfPages = [...arrOfCurrButtons];

    let dotsInitial = "...";
    let dotsLeft = "...";
    let dotsRight = "...";

    if (numberOfPages.length < 6) {
      tempNumberOfPages = numberOfPages;
    } else if (currentButton >= 1 && currentButton <= 3) {
      tempNumberOfPages = [1, 2, 3, 4, dotsInitial, numberOfPages.length];
    } else if (currentButton === 4) {
      const sliced = numberOfPages.slice(0, 5);
      tempNumberOfPages = [...sliced, dotsInitial, numberOfPages.length];
    } else if (currentButton > 4 && currentButton < numberOfPages.length - 2) {
      // from 5 to 8 -> (10 - 2)
      const sliced1 = numberOfPages.slice(currentButton - 2, currentButton); // sliced1 (5-2, 5) -> [4,5]
      const sliced2 = numberOfPages.slice(currentButton, currentButton + 1); // sliced1 (5, 5+1) -> [6]
      tempNumberOfPages = [
        1,
        dotsLeft,
        ...sliced1,
        ...sliced2,
        dotsRight,
        numberOfPages.length,
      ];
    } else if (currentButton > numberOfPages.length - 3) {
      // > 7
      const sliced = numberOfPages.slice(numberOfPages.length - 4); // slice(10-4)
      tempNumberOfPages = [1, dotsLeft, ...sliced];
    }

    setArrOfCurrButtons(tempNumberOfPages);
  }, [total, currentButton]);

  //update currentButton value if currentPageNo changes
  useEffect(() => {
    setCurrentButton(currentPage);
  }, [currentPage]);

  //onClick function
  const handleCurrentPage = (item) => {
    setCurrentButton(item);
    onPageChange(item);
  };

  return (
    <div className={styles["pagination-container"]}>
      {arrOfCurrButtons.map((item, index) => {
        return (
          <a
            key={index}
            className={`${
              item === "..."
                ? styles["no-cursor"]
                : currentButton === item
                ? styles["active"]
                : ""
            }`}
            onClick={() => (item === "..." ? "" : handleCurrentPage(item))}
          >
            {item}
          </a>
        );
      })}

      <a
        className={`${
          currentButton === "..."
            ? styles["no-cursor"]
            : currentButton === numberOfPages.length
            ? styles["disabled"]
            : ""
        }`}
        onClick={() =>
          currentButton === "..." || currentButton === numberOfPages.length
            ? ""
            : handleCurrentPage(currentButton + 1)
        }
      >
        <span className={styles.next}>Next »</span>
      </a>
    </div>
  );
}

Pagination.propTypes = {
  total: PropTypes.number.isRequired,
  currentPage: PropTypes.number,
};
export default Pagination;