import React from 'react';

import { Flex, IconButton, Icon, Text, IconButtonProps } from '@chakra-ui/react';

import { useTranslation } from 'react-i18next';

import { TbChevronLeft, TbChevronRight, TbChevronsLeft, TbChevronsRight } from 'react-icons/tb';

export interface IProps {
    currentIndex: number
    maxIndex: number
    setIndex(index: number): void
    setPrevious():void
    setNext():void
}

const Paginator: React.FC<IProps> = (props) => {

    const { currentIndex, maxIndex, setIndex, setPrevious, setNext } = props

    const { t } = useTranslation()

    return (
        <Flex w="full" mt={4} pr={8} justify="flex-end" wrap="wrap">
            <IconButton
                aria-label={t('table.first_page')}
                title={t('table.first_page') ?? ''}
                icon={<Icon as={TbChevronsLeft} />}
                mr={1}
                display={{ base: 'none', md: 'inline-flex' }}
                onClick={() => setIndex(0)}
                disabled={currentIndex == 0}
            />
            <IconButton
                aria-label={t('table.previous_page')}
                title={t('table.previous_page') ?? ''}
                icon={<Icon as={TbChevronLeft} />}
                mr={1}
                onClick={() => setPrevious()}
                disabled={currentIndex == 0}
            />
            {
                Array.from(Array(maxIndex).keys()).map((pageIndex) => {
                    const title = t('table.page', { page: pageIndex + 1 });
                    const disabled = currentIndex === pageIndex;
                    const style: Partial<IconButtonProps> = disabled ? { colorScheme: 'blue' } : {};
                    return (
                        <IconButton
                            aria-label={title}
                            title={title}
                            key={pageIndex}
                            icon={<Text>{pageIndex + 1}</Text>}
                            mr={1}
                            onClick={() => setIndex(pageIndex)}
                            disabled={disabled}
                            {...style}
                        />
                    );
                })
            }
            <IconButton
                aria-label={t('table.next_page')}
                title={t('table.next_page') ?? ''}
                icon={<Icon as={TbChevronRight} />}
                mr={{ base: 0, md: 1 }}
                onClick={() => setNext()}
                disabled={currentIndex + 1 == maxIndex}
            />
            <IconButton
                aria-label={t('table.last_page')}
                title={t('table.last_page') ?? ''}
                icon={<Icon as={TbChevronsRight} />}
                display={{ base: 'none', md: 'inline-flex' }}
                onClick={() => setIndex(maxIndex - 1)}
                disabled={currentIndex + 1 == maxIndex}
            />
        </Flex>
    );
};

export default Paginator;