import { useNavigate } from "react-router";
import type { Tokens } from "../../api/client";
import {
  Button,
  Grid,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
} from "@mui/material";

export const TokensSummary = (props: { tokens: Tokens }) => {
  const { tokens } = props;
  const { purchased, consumed, used, available } = tokens;
  const navigate = useNavigate();
  return (
    <Paper
      variant="outlined"
      sx={{
        p: 3,
        bgcolor: "aliceblue",
        borderRadius: 4,
      }}
    >
      <Grid container direction="column" spacing={3} alignItems="center">
        <Typography variant="h6">Your tokens summary</Typography>
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell align="center" sx={{ fontWeight: "bold" }}>
                  Purchased
                </TableCell>
                <TableCell align="center" sx={{ fontWeight: "bold" }}>
                  Consumed
                </TableCell>
                <TableCell align="center" sx={{ fontWeight: "bold" }}>
                  Allocated
                </TableCell>
                <TableCell align="center" sx={{ fontWeight: "bold" }}>
                  Available
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              <TableRow>
                <TableCell align="center">{purchased}</TableCell>
                <TableCell align="center">{consumed}</TableCell>
                <TableCell align="center">{used}</TableCell>
                <TableCell align="center">{available}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </TableContainer>
        <Button
          variant="contained"
          color="primary"
          sx={{ width: "100%" }}
          onClick={() => navigate("/buy")}
        >
          Buy tokens
        </Button>
        <Button
          variant="contained"
          color="secondary"
          sx={{ width: "100%" }}
          onClick={() => navigate("/invoices")}
        >
          See all purchases
        </Button>
      </Grid>
    </Paper>
  );
};