import { Box, Stack } from '@mui/material'
import DropDownButton from '../../DropDownButton/DropDownButton'
import { TextField } from '../../Input'
import TableStats from '../common/TableStats'
import { StyledPagination, StyledTableFooter } from '../common/styles'

interface TableFooterProps {
  totalCount: number
  limit: number
  handlePagination: (v: number) => void
  page: number
  handlePageLimit?: (v: number) => void
  handlePageInput?: (v: number) => void
}

export default function TableFooter({
  totalCount,
  limit,
  handlePagination,
  page,
  handlePageLimit,
  handlePageInput,
}: TableFooterProps) {
  const onChange = (v: number) => {
    handlePagination(v)
  }
  return (
    <StyledTableFooter>
      <TableStats limit={limit} totalCount={totalCount} page={page} />
      <Stack direction={'row'} gap={2} alignItems={'center'}>
        <StyledPagination
          page={page}
          count={Math.ceil(totalCount / limit)}
          onChange={(e, v) => onChange(v)}
          variant="outlined"
          shape="rounded"
        />

        {handlePageInput && (
          <Box
            sx={{
              '& .MuiBox-root': {
                display: 'flex',
                alignItems: 'center',
                gap: '5px',
              },
            }}
          >
            <TextField
              variant="outlined"
              label={'Page :'}
              size="small"
              value={page}
              onChange={(e) => handlePageInput(Number(e.target.value))}
              sx={{ width: '80px' }}
            />
          </Box>
        )}
      </Stack>
      {handlePageLimit ? (
        <LimitField handlePageLimit={handlePageLimit} limit={limit} />
      ) : (
        <Box></Box>
      )}
    </StyledTableFooter>
  )
}

const LimitField = ({ handlePageLimit, limit }) => {
  return (
    <Box>
      <DropDownButton
        button={{
          buttonProps: {
            variant: 'outlined',
            color: 'secondary',
            sx: {
              padding: '0px 10px',
              color: '#121212',
              fontSize: '13px',
              border: '1px solid #1212121A',
            },
          },
          label: `${limit} / page`,
        }}
        menu={[
          {
            label: 10,
            onClick: () => handlePageLimit(10),
          },

          {
            label: 20,
            onClick: () => handlePageLimit(20),
          },
          {
            label: 30,
            onClick: () => handlePageLimit(30),
          },
          {
            label: 50,
            onClick: () => handlePageLimit(50),
          },
          {
            label: 100,
            onClick: () => handlePageLimit(100),
          },
        ]}
      />
    </Box>
  )
}
