import React from 'react';
import {Box, HStack, Text} from '@chakra-ui/layout';
import {IconButton} from '@chakra-ui/button';
import {
  MdChevronLeft,
  MdChevronRight,
  MdFirstPage,
  MdLastPage,
} from 'react-icons/md';
import {Input} from '@chakra-ui/input';
import {Select} from '@chakra-ui/select';

export interface IPaginationControlProps {
  gotoPage: (page: number) => void;
  previousPage: () => void;
  nextPage: () => void;
  pageIndex: number;
  pageOptions: any;
  pageCount: number;
  canNextPage: boolean;
  canPreviousPage: boolean;
  pageSize: number;
  setPageSize: any;
}

export const PaginationControl = ({
  gotoPage,
  previousPage,
  nextPage,
  pageIndex,
  pageOptions,
  pageCount,
  canNextPage,
  canPreviousPage,
  pageSize,
  setPageSize,
}: IPaginationControlProps) => {
  return (
    <Box
      w='full'
      display='flex'
      color='gray.800'
      justifyContent='center'
      alignItems='center'
      p={2}>
      <HStack spacing={2}>
        <HStack>
          <IconButton
            aria-label='previous'
            variant='icon'
            size='md'
            fontSize='lg'
            isDisabled={!canPreviousPage}
            onClick={() => gotoPage(0)}
            icon={<MdFirstPage />}
          />
          <IconButton
            aria-label='previous'
            variant='icon'
            size='md'
            fontSize='lg'
            isDisabled={!canPreviousPage}
            onClick={() => previousPage()}
            icon={<MdChevronLeft />}
          />
          <HStack>
            <Text>Page </Text>
            <Text fontWeight='bold'>
              {pageIndex + 1} of {pageOptions.length}
            </Text>{' '}
          </HStack>
          <HStack>
            | Go to page:{' '}
            <Input
              type='number'
              size='sm'
              variant='filled'
              defaultValue={pageIndex + 1}
              onChange={(e) => {
                const page = e.target.value ? Number(e.target.value) - 1 : 0;
                gotoPage(page);
              }}
              width='60px'
            />
          </HStack>{' '}
          <IconButton
            aria-label='previous'
            variant='icon'
            size='md'
            fontSize='lg'
            isDisabled={!canNextPage}
            onClick={() => nextPage()}
            icon={<MdChevronRight />}
          />
          <IconButton
            aria-label='previous'
            variant='icon'
            size='md'
            fontSize='lg'
            isDisabled={!canNextPage}
            onClick={() => gotoPage(pageCount - 1)}
            icon={<MdLastPage />}
          />
        </HStack>

        <Select
          value={pageSize}
          size='sm'
          width='120px'
          variant='filled'
          onChange={(e) => {
            setPageSize(Number(e.target.value));
          }}>
          {[10, 20, 30, 40, 50].map((pageSize) => (
            <option key={pageSize} value={pageSize}>
              Show {pageSize}
            </option>
          ))}
        </Select>
      </HStack>
    </Box>
  );
};