import { Divider } from '@mui/material';
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';
import * as React from 'react';

interface BasePaginationProps {
    page: number;
    totalCount: number;
    pageSize: number;
    onChange: (newPage: number) => void;
}

export default function BasePagination({ page, pageSize, totalCount, onChange }: BasePaginationProps) {
    const [inputValue, setInputValue] = React.useState(page);

    React.useEffect(() => {
        setInputValue(page);
    }, [page]);

    React.useEffect(() => {
        const handler = setTimeout(() => {
            const maxPage = Math.ceil(totalCount / pageSize);
            let newPage = inputValue;

            if (inputValue === 0) {
                newPage = 1; // Agar 0 kiritsa, 1 page ga o‘tsin
            } else if (inputValue > maxPage) {
                newPage = maxPage; // Max page dan oshsa, max page ga o‘tsin
            }

            if (newPage !== page) {
                onChange(newPage);
            }
        }, 1000);

        return () => clearTimeout(handler);
    }, [inputValue, page, totalCount, pageSize, onChange]);

    return (
        <Stack spacing={2} direction='row' divider={<Divider orientation='vertical' flexItem />}>
            <Pagination
                page={page}
                size='large'
                count={Math.ceil(totalCount / pageSize)}
                onChange={(_, newPage) => onChange(newPage)}
                variant='outlined'
                shape='rounded'
                color='primary'
                sx={{
                    '.Mui-selected': {
                        backgroundColor: theme => theme.palette.primary.main,
                        color: '#fff',
                    },
                }}
            />
            <input
                value={inputValue}
                type='number'
                style={{ width: '50px', textAlign: 'center', outline: 'none' }}
                onChange={e => setInputValue(Number(e.target.value))}
            />
        </Stack>
    );
}