// mui
import {
  Card,
  Typography,
  Stack,
  TablePagination,
  TableContainer,
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableBody,
} from '@mui/material';
// react
import { useState } from 'react';
import { fDate } from '../../../utils/formatTime';

// ----------------------------------------------------------------------

function createData(benefitType: string, submissionDate: string, status: string) {
  return { benefitType, submissionDate, status };
}

// ----------------------------------------------------------------------

export default function CardClaimHistory({ data }) {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
    setPage(newPage);
  };

  // Data claim history
  const claimHistory = data?.claim_history;
  const rows = claimHistory ? claimHistory.map(history => {
      return createData(history.description, fDate(history.submission_date), history.status);
  }) : [];
  

  return (
    <Card sx={{ padding: 2 }}>
      <Stack direction="row" justifyContent="space-between" alignItems="center">
        <Typography variant="subtitle2">Claim History</Typography>
        <TablePagination
          component="div"
          count={rows.length}
          rowsPerPage={rowsPerPage}
          rowsPerPageOptions={[]}
          page={page}
          onPageChange={handleChangePage}
          sx={{
            border: 'none',
            '.MuiToolbar-root.MuiTablePagination-toolbar': {
              height: '24px',
              minHeight: '24px',
            },
            '.MuiTablePagination-actions .MuiButtonBase-root:nth-last-of-type': {
              marginLeft: 2,
            },
            '.MuiTablePagination-actions .MuiButtonBase-root': { padding: 1 },
          }}
        />
      </Stack>
      <Card>
        <TableContainer>
          <Table sx={{ minWidth: 650 }} size="small">
            <TableHead>
              <TableRow>
                <TableCell>Benefit Type</TableCell>
                <TableCell align="center">Submission Date</TableCell>
                <TableCell align="center">Status</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {/* if you don't need to support IE11, you can replace the `stableSort` call with:
              rows.sort(getComparator(order, orderBy)).slice() */}
              {rows
                // .sort(getComparator(order, orderBy))
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map((row, index) => (
                  <TableRow key={index}>
                    <TableCell>{row.benefitType}</TableCell>
                    <TableCell align="center">{row.submissionDate}</TableCell>
                    <TableCell align="center">{row.status}</TableCell>
                  </TableRow>
                ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Card>
    </Card>
  );
}
