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

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

export default function TableFooter({
  totalCount,
  limit,
  handlePagination,
  page,
  handlePageLimit,
}: TableFooterProps) {
  const onChange = (v: number) => {
    handlePagination(v)
  }
  return (
    <StyledTableFooter>
      <TableStats limit={limit} totalCount={totalCount} page={page} />
      <StyledPagination
        page={page}
        count={Math.ceil(totalCount / limit)}
        onChange={(e, v) => onChange(v)}
        variant="outlined"
        shape="rounded"
      />
      {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>
  )
}
