import React, { type FC } from 'react';
import { HiChevronLeft, HiChevronRight } from 'react-icons/hi2';
import classNames from 'clsx';
import { Button } from '../Button/Button';

export const Pagination: FC<{
  pageIndex: number;
  onPageIndexChange?: (v: number) => void;
  href?: (v: number) => string;
  pageCount: number;
  pageOptions?: number[];
}> = ({ pageIndex = 0, onPageIndexChange, pageCount, href, pageOptions = buildPageOptions(pageIndex, pageCount) }) => {
  const pageNumber = pageIndex + 1;
  const canNextPage = pageNumber < pageCount;
  const canPreviousPage = pageNumber > 1;
  // const previousPage = () => onPageIndexChange?.(pageIndex - 1);
  // const nextPage = () => onPageIndexChange?.(pageIndex + 1);
  // let firstPage = () => onPageIndexChange(0);
  // let lastPage = () => onPageIndexChange(pageCount - 1);

  return (
    <div className={'flex items-center gap-1'}>
      {/* <div className={'btn-group'}> */}
      {/*  <Button size={'xs'} className={'p-1'} onClick={firstPage} disabled={!canPreviousPage}> */}
      {/*    <ChevronDoubleLeftIcon className={'h-4 w-4'} /> */}
      {/*  </Button> */}
      {canPreviousPage && (
        <Button
          href={href?.(pageIndex - 1)}
          onClick={() => onPageIndexChange?.(pageIndex - 1)}
          className={'btn btn-xs p-1'}
        >
          <HiChevronLeft className={'h-4 w-4'} />
        </Button>
      )}
      {!canPreviousPage && (
        <button disabled className={'btn btn-xs p-1'}>
          <HiChevronLeft className={'h-4 w-4'} />
        </button>
      )}

      <div className={'flex items-center gap-1'}>
        {!pageOptions && (
          <button className={'btn btn-xs'}>
            {pageNumber}/{pageCount}
          </button>
        )}
        {pageOptions?.map((v, i) => {
          let n = v;
          switch (v) {
            case -1:
              n = pageIndex - 5;
              break;
            case -2:
              n = pageIndex + 5;
              break;
          }
          return (
            <Button
              key={v > 0 ? v : -i}
              className={classNames('btn btn-ghost btn-xs bg-transparent font-mono', v === pageIndex && 'btn-active')}
              href={href?.(n)}
              onClick={() => onPageIndexChange?.(n)}
              // disabled={v === pageIndex || v < 0}
              title={`第${n + 1}页`}
            >
              {/* 1-2位的数字不至于导致 UI 错位 */}
              <span className={'min-w-[2ch]'}>{v >= 0 ? v + 1 : '...'}</span>
            </Button>
          );
        })}
      </div>

      {canNextPage && (
        <Button
          href={href?.(pageIndex + 1)}
          onClick={() => onPageIndexChange?.(pageIndex + 1)}
          className={'btn btn-xs p-1'}
        >
          <HiChevronRight className={'h-4 w-4'} />
        </Button>
      )}
      {!canNextPage && (
        <button type={'button'} disabled className={'btn btn-xs p-1'}>
          <HiChevronRight className={'h-4 w-4'} />
        </button>
      )}
      {/* <Button size={'xs'} className={'p-1'} onClick={lastPage} disabled={!canNextPage}> */}
      {/*  <ChevronDoubleRightIcon className={'h-4 w-4'} onClick={() => onPageIndexChange(pageCount - 1)} /> */}
      {/* </Button> */}
      {/* </div> */}
      {/* <hr className={'border-r h-6 mx-2'} /> */}
      {/* <small> */}
      {/*  <b> */}
      {/*    */}
      {/*  </b> */}
      {/* </small> */}
    </div>
  );
};
const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);

export function buildPageOptions(pageIndex: number, pageCount: number): number[] {
  let ops: number[] = [];
  // 默认显示 5 个 - 包含最前最后就是7个
  if (pageCount <= 7) {
    ops = new Array(pageCount).fill(null).map((_, i) => i);
  } else {
    let min = clamp(pageIndex - 2, 0, pageCount - 1);
    let max = clamp(pageIndex + 2, 0, pageCount - 1);
    // 处理不够补齐情况
    const maxPad = Math.abs(pageIndex - 2 - min);
    const minPad = Math.abs(pageIndex + 2 - max);
    max += maxPad;
    min -= minPad;

    if (min !== 0) {
      ops.push(0);
      if (min !== 1) {
        ops.push(-1);
      }
    }

    for (let i = min; i < pageIndex; i++) {
      ops.push(i);
    }
    ops.push(pageIndex);
    for (let i = pageIndex + 1; i <= max; i++) {
      ops.push(i);
    }

    if (max < pageCount - 1) {
      if (max !== pageCount - 2) {
        ops.push(-2);
      }
      ops.push(pageCount - 1);
    }
  }
  return ops;
}