import React, { FC } from 'react';
import { Flex } from '../Flex';
import { Box } from '../Box';
import { Text } from '../Text';
import { Select } from '../Select';
import { Button } from '../Button';
import { theme } from '~/styles/theme';
import { Icon } from '../Icon';
import * as icons from '../../assets/images/icons';
import { TablePaginationProps } from './TableTypes';

export const TablePagination: FC<TablePaginationProps> = ({
  canPreviousPage,
  canNextPage,
  nextPage,
  previousPage,
  setPageSize,
  totalRows,
  pageIndex,
  pageSize,
  pageSizes,
  pageCount,
  gotoPage,
  label = 'Rows per page',
}) => {
  const buttonStyles = { minWidth: 50, padding: 0 };

  return (
    <Flex justifyContent="flex-end" lineHeight="50px">
      {pageSizes && setPageSize && (
        <Flex mr="xxl">
          <Text variant="b2m" color="gray.2">
            {label}
          </Text>
          <Select
            variant="ghost"
            options={pageSizes.map((size: number) => ({
              label: size,
              value: size,
            }))}
            value={pageSize}
            onChange={(value: number) => {
              setPageSize(value);
            }}
            styles={{
              container: (provided: any) => ({
                ...provided,
                marginLeft: 10,
                marginTop: 2,
                width: 50,
              }),
              singleValue: (provided: any) => ({
                ...provided,
                color: theme.colors.highlightText,
                fontSize: theme.fontSizes[1],
                fontWeight: theme.fontWeights.semiBold,
                lineHeight: theme.lineHeights.normal,
              }),
              menu: (provided: any) => ({
                ...provided,
                marginTop: -5,
                width: 50,
              }),
            }}
            noIcon
          />
        </Flex>
      )}

      <Box mr="xxl">
        <Text variant="b2m" color="gray.1">
          {`${pageIndex * pageSize + 1}-${
            totalRows
              ? Math.min(totalRows, (pageIndex + 1) * pageSize)
              : (pageIndex + 1) * pageSize
          }${totalRows ? ` of ${totalRows}` : ''}`}
        </Text>
      </Box>

      <Flex mr="s">
        {gotoPage && pageCount && (
          <Button
            variant="ghost"
            style={buttonStyles}
            onClick={() => gotoPage(0)}
            disabled={!canPreviousPage}
          >
            <Icon
              Asset={icons.SvgChevronLeft}
              width={24}
              height={24}
              color="gray.3"
            />
            <Icon
              Asset={icons.SvgChevronLeft}
              width={24}
              height={24}
              color="gray.3"
              ml="-17px"
            />
          </Button>
        )}

        <Button
          variant="ghost"
          style={buttonStyles}
          onClick={() => previousPage()}
          disabled={!canPreviousPage}
        >
          <Icon
            Asset={icons.SvgChevronLeft}
            width={24}
            height={24}
            color="gray.3"
          />
        </Button>

        <Button
          variant="ghost"
          style={buttonStyles}
          onClick={() => nextPage()}
          disabled={!canNextPage}
        >
          <Icon
            Asset={icons.SvgChevronRight}
            width={24}
            height={24}
            color="gray.3"
          />
        </Button>

        {gotoPage && pageCount && (
          <Button
            variant="ghost"
            style={buttonStyles}
            onClick={() => gotoPage(pageCount - 1)}
            disabled={!canNextPage}
          >
            <Icon
              Asset={icons.SvgChevronRight}
              width={24}
              height={24}
              color="gray.3"
              mr="-17px"
            />
            <Icon
              Asset={icons.SvgChevronRight}
              width={24}
              height={24}
              color="gray.3"
            />
          </Button>
        )}
      </Flex>
    </Flex>
  );
};
