import "./Pagination.scss";
import arrow_right from "./icons/arrow-right.svg";
import arrow_left from "./icons/arrow-left.svg";
import Image from "next/image";
import { useState } from "react";

interface IPaginationProps {
  setActivePage: (page: number | ((prev: number) => number)) => void;
  activePage: number;
  prev: string | null;
  next: string | null;
  count: number;
  current_count: number;
  limit: number;
}

const Pagination: React.FC<IPaginationProps> = ({
  setActivePage,
  activePage,
  prev,
  next,
  count,
  current_count,
  limit,
}: IPaginationProps) => {
  const pages_count = Math.ceil(count / limit);
  const showPages = () => {
    const btns = [];

    for (let i = 1; i <= pages_count; i++) {
      btns.push(
        <button
          onClick={() => setActivePage(i)}
          key={i}
          className={
            activePage === i
              ? "pagination__page_active"
              : "pagination__page"
          }
        >
          {i}
        </button>
      );
    }

    if (current_count < 8 && activePage === 1) {
      return [...btns.slice(0, 1)];
    }

    if (pages_count > 5) {
      if (activePage > 2) {
        if (
          activePage + 2 === pages_count - 1 ||
          activePage + 1 === pages_count - 1 ||
          activePage === pages_count - 1 ||
          activePage === pages_count
        ) {
          const newBtns = [
            ...btns.slice(0, 1),
            <button key="..." disabled>
              ...
            </button>,
            ...btns.slice(
              activePage -
                (activePage + 2 === pages_count - 1 ? 2 : 1)
            ),
          ];

          if (newBtns.length < 6) {
            return [
              ...btns.slice(0, 1),
              <button key="..." disabled>
                ...
              </button>,
              ...btns.slice(-4),
            ];
          }

          return newBtns;
        } else {
          return [
            ...btns.slice(0, 1),
            <button key="...1" disabled>
              ...
            </button>,

            ...btns.slice(
              activePage - (activePage === 3 ? 1 : 2),
              activePage + 1
            ),

            <button key="..." disabled>
              ...
            </button>,
            ...btns.slice(-2),
          ];
        }
      } else {
        return [
          ...btns.slice(0, 3),
          <button key="..." disabled>
            ...
          </button>,
          ...btns.slice(-2),
        ];
      }
    }

    return btns;
  };

  const prevPage = () => {
    if (activePage - 1 === 0) return;
    setActivePage((prev) => prev - 1);
  };

  const nextPage = () => {
    if (activePage + 1 > pages_count) return;
    setActivePage((prev) => prev + 1);
  };
  return (
    <div className="pagination">
      <button
        onClick={prevPage}
        disabled={prev === null}
        className={`pagination__prev${
          prev === null ? "-disabled" : ""
        }`}
      >
        <Image src={arrow_left} alt="" />
      </button>
      {showPages().map((btn) => btn)}
      <button
        onClick={nextPage}
        disabled={next === null}
        className={`pagination__next${
          next === null ? "-disabled" : ""
        }`}
      >
        <Image src={arrow_right} alt="" />
      </button>
    </div>
  );
};

export default Pagination;
