import React, { useEffect, useState } from "react";
import style from "./pagination.module.css";

const Pagination = (props) => {
  const [totalData, setTotalData] = useState(0);
  const [totalPaginationNumber, setTotalPaginationNumber] = useState(0);
  const [totalDataPerPage, setTotalDataPerPage] = useState(0);
  const [totalNumberToDisplay, setTotalNumberToDisplay] = useState(5);
  const [selectedPage, setSelectedPage] = useState(1);
  const [extraRight, setExtraRight] = useState(false);
  const [extraLeft, setExtraLeft] = useState(false);
  const [rightArrow, setRightArrow] = useState(true);
  const [leftArrow, setLeftArrow] = useState(true);
  const [paginationDisplayCount, setPaginationDisplayCount] = useState(0);

  useEffect(() => {
    if (props.totalData) setTotalData(props.totalData);
    if (props.totalDataPerPage) setTotalDataPerPage(props.totalDataPerPage);
    if (props.totalNumberToDisplay)
      setTotalNumberToDisplay(props.totalNumberToDisplay);
    if (props.page) setSelectedPage(props.page);
  }, [props]);

  useEffect(() => {
    setTotalPaginationNumber(() => Math.ceil(totalData / totalDataPerPage));
  }, [totalData]);
  useEffect(() => {
    onSetAvailableBtn();
    if (totalPaginationNumber >= selectedPage + totalNumberToDisplay) {
      // for checking if count has more than the pagination count page
      setPaginationDisplayCount(totalNumberToDisplay);
    } else {
      if (
        totalPaginationNumber -
          selectedPage +
          1 +
          parseInt(prevPaginationCount()) <
        totalNumberToDisplay
      ) {
        if (totalPaginationNumber < totalNumberToDisplay) {
          setPaginationDisplayCount(totalPaginationNumber);
        } else setPaginationDisplayCount(totalNumberToDisplay);
      } else {
        setPaginationDisplayCount(totalNumberToDisplay);
      }
    }
    if (
      selectedPage + Math.floor(totalNumberToDisplay / 2) >=
        totalPaginationNumber ||
      totalNumberToDisplay >= totalPaginationNumber
    ) {
      setExtraRight(false);
    } else setExtraRight(true);

    if (
      selectedPage - Math.floor(totalNumberToDisplay / 2) > 1 &&
      totalNumberToDisplay - totalPaginationNumber < 0
    ) {
      setExtraLeft(true);
    } else setExtraLeft(false);
  }, [totalPaginationNumber, selectedPage]);

  const onSetAvailableBtn = () => {
    if (selectedPage <= 1) {
      setLeftArrow(false);
    } else setLeftArrow(true);
    if (selectedPage >= totalPaginationNumber) {
      setRightArrow(false);
    } else setRightArrow(true);
  };

  const prevPaginationCount = () => {
    if (
      totalPaginationNumber - selectedPage <
      Math.floor(totalNumberToDisplay / 2)
    ) {
      return totalNumberToDisplay - (totalPaginationNumber - selectedPage) - 1;
    } else if (selectedPage > Math.floor(totalNumberToDisplay / 2)) {
      return Math.floor(totalNumberToDisplay / 2);
    } else {
      return (
        Math.floor(totalNumberToDisplay / 2) -
        (Math.floor(totalNumberToDisplay / 2) - selectedPage + 1)
      );
    }
  };

  const onSetSelectedPage = (page = 1) => {
    if (page > 0 && page <= totalPaginationNumber) {
      setSelectedPage(page);
      props.getPage && props.getPage(page);
    }
  };

  return (
    <React.Fragment>
      {totalPaginationNumber > 0 && paginationDisplayCount > 0 && (
        <div className={style.pagination_body}>
          <div className={style.stats}>
            {props.entriesText && (
              <>
                Showing {selectedPage * totalDataPerPage - totalDataPerPage + 1}{" "}
                to{" "}
                {selectedPage * totalDataPerPage > totalData
                  ? totalData
                  : selectedPage * totalDataPerPage}{" "}
                of {totalData} Entries
              </>
            )}
          </div>
          <div
            className={`${style.pagination} ${
              props.customCss ? props.customCss : null
            }`}
          >
            <button
              className={`${style.left_first} ${
                !leftArrow ? style.disabled : null
              }`}
              onClick={() => {
                onSetSelectedPage(1);
              }}
              disabled={!leftArrow}
            >
              &#10094;&#10094;
            </button>
            <button
              className={`${style.left} ${!leftArrow ? style.disabled : null}`}
              onClick={() => {
                onSetSelectedPage(selectedPage - 1);
              }}
              disabled={!leftArrow}
            >
              &#10094;
            </button>
            {extraLeft && <button className={style.extra_left}>...</button>}
            {totalPaginationNumber &&
              Array.from(Array(paginationDisplayCount), (e, i) => {
                return (
                  i + selectedPage - parseInt(prevPaginationCount()) > 0 && (
                    <button
                      key={i}
                      className={`${style.number}  ${
                        i + selectedPage - parseInt(prevPaginationCount()) ===
                        selectedPage
                          ? style.disabled + " " + style.selected
                          : undefined
                      }`}
                      onClick={() =>
                        onSetSelectedPage(
                          i + selectedPage - parseInt(prevPaginationCount())
                        )
                      }
                      disabled={
                        i + selectedPage - parseInt(prevPaginationCount()) ===
                        selectedPage
                      }
                    >
                      {i + selectedPage - parseInt(prevPaginationCount())}
                    </button>
                  )
                );
              })}
            {extraRight && <button className={style.extra_right}>...</button>}
            <button
              className={`${style.right} ${
                !rightArrow ? style.disabled : null
              }`}
              onClick={() => {
                onSetSelectedPage(selectedPage + 1);
              }}
              disabled={!rightArrow}
            >
              &#10095;
            </button>
            <button
              className={`${style.right_last} ${
                !rightArrow ? style.disabled : null
              }`}
              onClick={() => {
                onSetSelectedPage(totalPaginationNumber);
              }}
              disabled={!rightArrow}
            >
              &#10095;&#10095;
            </button>
          </div>
        </div>
      )}
    </React.Fragment>
  );
};

export default Pagination;
