import React, { useState } from "react";
import {
  Select,
  HStack,
  Text,
  Box,
  Button,
  useColorMode,
} from "@chakra-ui/react";
import { TbChevronLeftPipe, TbChevronRightPipe } from "react-icons/tb";
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";

const Pagination = ({
  pageSize,
  setPageSize,
  totalItems , // using transactionCount as totalItems
  isLoading,
  setCurrentPage,
  currentPage,
}) => {
  const { colorMode } = useColorMode();

  // Calculate total pages based on the totalItems (transactionCount)
  const totalPages = Math.ceil(totalItems / pageSize);

  // Handle page size change
  const handlePageSizeChange = (e) => {
    setPageSize(Number(e.target.value));
    setCurrentPage(1); // Reset to the first page whenever page size changes
  };

  // Previous page function
  const paginationPrev = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  // Next page function
  const paginationNext = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  // Display range for the current page
  const displayRange = {
    start: (currentPage - 1) * pageSize + 1,
    end: Math.min(currentPage * pageSize, totalItems),
  };

  return (
    <HStack mt={{base:5,md : 14}} display={"flex"} justifyContent={{base:"space-around",md:"end"}}>
      <Box className="pagination-controls" display={"flex"} fontSize={"sm"} alignItems={"center"}>
        <Text display={{base:"none",md :"block"}}>Rows per page :</Text>
        <Select
          display={{base:"none",md :"block"}}
          mx={4}
          width={"60px"}
          rounded="md"
          size="xs"
          value={pageSize}
          onChange={handlePageSizeChange} // Handle page size change
        >
          <option value={10}>10</option>
          <option value={20}>20</option>
          <option value={30}>30</option>
        </Select>

        {/* Display the current page range and total items */}
        <Text mx={5} display={{base:"none",md :"block"}}>
          {displayRange.start}-{displayRange.end} of {totalItems}
        </Text>

        {/* Pagination controls */}
        <Box display={"flex"} alignItems={"center"}>
          <Button
            bg={"none"}
            p={0}
            onClick={() => setCurrentPage(1)} // Go to the first page
            _hover={{ backgroundColor: "none", border: "none" }}
            _focus={{ outline: "none" }}
            _active={{ backgroundColor: "none" }}
            isDisabled={currentPage === 1} // Disable if on the first page
          >
            <TbChevronLeftPipe />
          </Button>

          <Button
            bg={"none"}
            p={0}
            onClick={paginationPrev} // Go to the previous page
            _hover={{ backgroundColor: "none", border: "none" }}
            _focus={{ outline: "none" }}
            _active={{ backgroundColor: "none" }}
            isDisabled={currentPage === 1} // Disable if on the first page
          >
            <FiChevronLeft />
          </Button>

          <Select
            display={{base:"block",md :"none"}}
            border={"none"}
            mx={4}
            width={"60px"}
            rounded="md"
            size="xs"
            value={pageSize}
            onChange={handlePageSizeChange} // Handle page size change
          >
            <option value={10}>10</option>
            <option value={20}>20</option>
            <option value={30}>30</option>
          </Select>

          <Button
            bg={"none"}
            p={0}
            onClick={paginationNext} // Go to the next page
            _hover={{ backgroundColor: "none", border: "none" }}
            _focus={{ outline: "none" }}
            _active={{ backgroundColor: "none" }}
            isDisabled={currentPage === totalPages} // Disable if on the last page
          >
            <FiChevronRight />
          </Button>

          <Button
            bg={"none"}
            p={0}
            onClick={() => setCurrentPage(totalPages)} // Go to the last page
            _hover={{ backgroundColor: "none", border: "none" }}
            _focus={{ outline: "none" }}
            _active={{ backgroundColor: "none" }}
            isDisabled={currentPage === totalPages} // Disable if on the last page
          >
            <TbChevronRightPipe />
          </Button>
        </Box>
      </Box>
    </HStack>
  );
};

export default Pagination;
