import React, { Fragment, useState, useEffect } from "react"
import cls from "classnames"

import t from "@/constants/wording"

import * as styles from "./index.module.scss"

type IProps = {
  total: number
  onSelect: (i: number) => void
  pageSize: number
  currentPage: number
}
const Pagination: React.FC<IProps> = props => {
  const { total, pageSize, onSelect: gotoPage, currentPage } = props
  const maxPage = Math.ceil(total / pageSize)
  const [midPage, setMidPage] = useState(0)
  useEffect(() => {
    const totalVal = Math.ceil(total / pageSize)
    setMidPage(Math.ceil(totalVal / 2))
  }, [total])
  useEffect(() => {
    if (![midPage - 1, midPage, midPage + 1].includes(currentPage + 1)) {
      if (currentPage + 1 <= maxPage - 1 && currentPage + 1 >= 2) {
        setMidPage(currentPage + 1)
      }
    }
  }, [currentPage])
  const keyHandle = (e: KeyboardEvent) => {
    if (e.key === "Enter") {
      const val = parseInt(e?.target?.value)
      const isValid = /^\d+$/.test(val) && val > 0 && val <= maxPage
      if (isValid) {
        gotoPage(val - 1)
      }
    }
  }
  const getPageBtns = () => {
    const btnList = []
    if (0 <= maxPage && maxPage <= 5) {
      for (let index = 0; index < maxPage; index++) {
        btnList.push(
          <button
            className={cls(
              currentPage === index ? styles.active : "",
              "button"
            )}
            key={index}
            onClick={() => gotoPage(index)}
          >
            {index + 1}
          </button>
        )
      }
    } else {
      {
        btnList.push(
          <Fragment key={"pagination"}>
            <button
              className={cls(currentPage === 0 ? styles.active : "", "button")}
              onClick={() => gotoPage(0)}
            >
              1
            </button>
            <span
              className="pagination-ellipsis"
              style={{ display: midPage < 4 ? "none" : "block" }}
            >
              &hellip;
            </span>
            <button
              className={cls(
                currentPage + 1 === midPage - 1 ? styles.active : "",
                "button"
              )}
              onClick={() => gotoPage(midPage - 2)}
              style={{
                display: midPage - 1 <= 1 ? "none" : "block",
              }}
            >
              {midPage - 1}
            </button>
            <button
              className={cls(
                currentPage + 1 === midPage ? styles.active : "",
                "button"
              )}
              onClick={() => gotoPage(midPage - 1)}
            >
              {midPage}
            </button>
            <button
              className={cls(
                currentPage === midPage ? styles.active : "",
                "button"
              )}
              onClick={() => gotoPage(midPage)}
              style={{
                display: midPage + 1 >= maxPage ? "none" : "block",
              }}
            >
              {midPage + 1}
            </button>
            <span
              className="pagination-ellipsis"
              style={{
                display: midPage > maxPage - 3 ? "none" : "block",
              }}
            >
              &hellip;
            </span>
            <button
              className={cls(
                currentPage + 1 === maxPage ? styles.active : "",
                "button"
              )}
              onClick={() => gotoPage(maxPage - 1)}
            >
              {maxPage}
            </button>
          </Fragment>
        )
      }
    }

    return btnList
  }
  return (
    <div className={cls(styles.pagination, "buttons")}>
      <button
        className="button"
        data-attr={"prev"}
        onClick={() => {
          gotoPage(currentPage === 0 ? 0 : currentPage - 1)
        }}
        disabled={currentPage === 0}
      >
        {t("previous page")}
      </button>
      {getPageBtns()}
      <button
        className="button"
        data-attr={"next"}
        onClick={() => {
          gotoPage(
            currentPage + 1 < Math.ceil(total / pageSize)
              ? currentPage + 1
              : currentPage
          )
        }}
        disabled={currentPage + 1 >= Math.ceil(total / pageSize)}
      >
        {t("next page")}
      </button>
      {maxPage > 5 ? (
        <div
          className={cls(
            styles.inputContainer,
            "is-flex is-justify-content-flex-end"
          )}
        >
          <span>跳至</span>
          <input className={cls("input", styles.Input)} onKeyDown={keyHandle} />
          <span>页</span>
        </div>
      ) : null}
    </div>
  )
}

export default Pagination