import {
  ChevronLeftIcon,
  ChevronRightIcon,
  DotsHorizontalIcon,
} from '@radix-ui/react-icons';
import React from 'react';

function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
  const totalPages = Math.ceil(totalItems / itemsPerPage);

  const handlePageChange = (page) => {
    let targetPage = page;
    if (page < 1) targetPage = 1;
    if (page > totalPages) targetPage = totalPages;
    onPageChange(targetPage);
  };

  const handlePreviousPage = () => {
    if (currentPage > 1) {
      handlePageChange(currentPage - 1);
    }
  };

  const handleNextPage = () => {
    if (currentPage < totalPages) {
      handlePageChange(currentPage + 1);
    }
  };

  const renderPageNumbers = () => {
    console.log('renderPageNumbers' + currentPage + totalPages);
    if (totalPages <= 7) {
      const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
      return renderButtons(pages);
    }
    let rangeLeft = Math.max(2, currentPage - 1);
    let rangeRight = Math.min(totalPages - 1, currentPage + 1);
    const pages = [];
    if (rangeRight <= 4) {
      rangeRight = 5;
    }
    if (rangeLeft >= totalPages - 3) {
      rangeLeft = totalPages - 4;
    }

    if (rangeLeft > 2) {
      if (rangeLeft === 3) {
        pages.push(2);
      } else {
        pages.push(-1);
      }
    }
    for (let i = rangeLeft; i <= rangeRight; i++) {
      pages.push(i);
    }
    if (rangeRight < totalPages - 1) {
      if (rangeRight === totalPages - 2) {
        pages.push(totalPages - 1);
      } else {
        pages.push(-1);
      }
    }
    return renderButtons([1, ...pages, totalPages]);
  };

  const renderButtons = (pages) =>
    pages.map((page, index) => {
      if (page === -1) {
        return JumpFivePagesButton(index === 1);
      }
      return PageButton(page);
    });
  // 普通页码按钮
  const PageButton = (page) => {
    return (
      <button
        key={page}
        className={`mx-1 w-8 h-8 text-sm rounded border ${
          page === currentPage
            ? 'bg-blue-500 text-white hover:bg-blue-600'
            : 'hover:bg-gray-100'
        }`}
        onClick={() => handlePageChange(page)}>
        {page}
      </button>
    );
  };
  // 跳5页按钮
  const JumpFivePagesButton = (isLeft) => {
    const handleLeftJump = () => {
      if (isLeft) {
        handlePageChange(currentPage - 5);
      } else {
        handlePageChange(currentPage + 5);
      }
    };
    return (
      <button
        key={isLeft ? 'left' : 'right'}
        className={'mx-1 w-8 h-8 text-sm rounded border hover:bg-gray-100'}
        onClick={handleLeftJump}>
        <center>
          <DotsHorizontalIcon />
        </center>
      </button>
    );
  };

  return (
    <div className='flex items-center justify-center'>
      <button
        className={`mx-1 w-8 h-8 text-sm rounded border hover:bg-gray-100 ${
          currentPage === 1 ? 'cursor-not-allowed' : 'cursor-pointer'
        }`}
        disabled={currentPage === 1}
        onClick={handlePreviousPage}>
        <center>
          <ChevronLeftIcon />
        </center>
      </button>
      {renderPageNumbers()}
      <button
        className={`mx-1 w-8 h-8 text-sm rounded border hover:bg-gray-100 ${
          currentPage === totalPages ? 'cursor-not-allowed' : 'cursor-pointer'
        }`}
        disabled={currentPage === totalPages}
        onClick={handleNextPage}>
        <center>
          <ChevronRightIcon />
        </center>
      </button>
    </div>
  );
}

export default Pagination;
