Untitled

import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
import { Box, Flex, IconButton, Input, Select, Text, Tooltip, useNumberInput } from '@chakra-ui/react'
import React, { useRef } from 'react'
import { AiOutlineDoubleLeft, AiOutlineDoubleRight } from 'react-icons/ai'

export const PaginationComp = ({ data, curPage, setCurPage, goToPrevPage, goToNextPage, handlePageLimitChange, size = 'md', limitArray = [5, 10, 20] }: any) => {

    const _goToPrevPage = () => {
        if (!data?.hasPrevPage) return;
        const page = curPage <= 1 ? 2 : curPage
        goToPrevPage(String(Number(page) - 1));
    }

    const _goToNextPage = () => {
        if (!data?.hasNextPage) return;
        goToNextPage(String(Number(curPage) + 1));
    }

    const { getInputProps } = useNumberInput()

    const inputRef: any = useRef()

    const _submit = (page: number) => {
        if (page > 0 && page <= data?.totalPages && page !== curPage) {
            setCurPage(page)
            inputRef.current.value = null
        }
    }

    return (
        <Flex gap={{ base: 1, md: 4 }} alignItems="center" flexWrap={'wrap'}>
            <Flex>
                <Tooltip placement='top' label="First Page">
                    <IconButton
                        size={{ base: 'sm', md: size }}
                        variant={'outline'}
                        onClick={() => setCurPage(1)}
                        isDisabled={!data?.hasPrevPage}
                        icon={<AiOutlineDoubleLeft />}
                        aria-label={''}
                        mr={2}
                    />
                </Tooltip>
                <Tooltip placement='top' label="Previous Page">
                    <IconButton
                        size={{ base: 'sm', md: size }}
                        variant={'outline'}
                        onClick={_goToPrevPage}
                        isDisabled={!data?.hasPrevPage}
                        icon={<ChevronLeftIcon />}
                        aria-label={''}
                    />
                </Tooltip>
            </Flex>

            <Flex alignItems="center">
                <Box flexShrink="0" >
                    Page{" "}
                    <Text fontWeight="bold" fontSize={{ base: 'sm', md: size }} as="span">
                        {curPage || '-'}
                    </Text>{" "}
                    of{" "}
                    <Text fontWeight="bold" fontSize={{ base: 'sm', md: size }} as="span">
                        {data?.totalPages || '-'}
                    </Text>
                </Box>
            </Flex>
            <Flex>
                <Tooltip placement='top' label="Next Page">
                    <IconButton
                        size={{ base: 'sm', md: size }}
                        variant={'outline'}
                        onClick={_goToNextPage}
                        isDisabled={!data?.hasNextPage}
                        icon={<ChevronRightIcon />}
                        aria-label={''}
                    />
                </Tooltip>
                <Tooltip placement='top' label="Last Page">
                    <IconButton
                        size={{ base: 'sm', md: size }}
                        variant={'outline'}
                        onClick={() => setCurPage(data.totalPages)}
                        isDisabled={!data?.hasNextPage}
                        icon={<AiOutlineDoubleRight />}
                        ml={2} aria-label={''}
                    />
                </Tooltip>
            </Flex>
            <Text display={{ base: 'none', md: 'block' }} fontSize={{ base: 'sm', md: size }}>Go to Page</Text>
            <Input display={{ base: 'none', md: 'block' }} ref={inputRef} size={{ base: 'sm', md: size }} w={50} p={2} onKeyDown={(e: any) => e.key === 'Enter' ? _submit(e.target.value) : null} {...getInputProps} placeholder='--' />
            <Select
                w={32}
                size={{ base: 'sm', md: size }}
                isDisabled={!data?.totalDocs}
                value={data?.limit}
                onChange={handlePageLimitChange}
            >
                {limitArray?.map((pageSize: number) => (
                    <option key={pageSize} value={pageSize}>
                        Show {pageSize}
                    </option>
                ))}
            </Select>
        </Flex>
    )
}