import { type InvoiceSummary } from "../../api/client";
import {
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
  Typography,
} from "@mui/material";
import { useState } from "react";
import { FormattedDate } from "react-intl";

export const SessionSummaryTable = (props: {
  invoiceSummary: InvoiceSummary;
}) => {
  const { invoiceSummary } = props;
  const [page, setPage] = useState(0);
  const rowsPerPage = 5;

  return (
    <Paper
      variant="outlined"
      sx={{
        p: 3,
        bgcolor: "aliceblue",
        borderRadius: 4,
      }}
    >
      <Typography
        sx={{
          paddingBottom: "10px",
        }}
        variant="h6"
      >
        Sessions summary
      </Typography>
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell align="center" sx={{ fontWeight: "bold" }}>
                Session date
              </TableCell>
              <TableCell align="center" sx={{ fontWeight: "bold" }}>
                Session status
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {invoiceSummary.sessionsData
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map(({ date, status }) => (
                <TableRow>
                  <TableCell align="center">
                    <FormattedDate
                      value={new Date(date)}
                      day="numeric"
                      month="short"
                      year="numeric"
                    />
                  </TableCell>
                  <TableCell align="center">{status}</TableCell>
                </TableRow>
              ))}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        component="div"
        count={invoiceSummary.purchaseData.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={(_, newPage) => setPage(newPage)}
        rowsPerPageOptions={[]}
      />
    </Paper>
  );
};