import { Async } from "react-async";
import { getInvoicingSummary, type InvoiceSummary } from "../../api/client";
import { Alert, Button, Grid, Typography } from "@mui/material";
import { PurchaseSummaryTable } from "./PurchaseSummaryTable";
import { SessionSummaryTable } from "./SessionSummaryTable";
import { useNavigate } from "react-router";

export const InvoicePage = () => {
  const invoiceSummaryPromise = getInvoicingSummary();
  const navigate = useNavigate();

  return (
    <Grid container direction="column" spacing={2} alignItems="center">
      <Typography variant="h3">Summary</Typography>
      <Async promise={invoiceSummaryPromise}>
        <Async.Fulfilled<InvoiceSummary>>
          {(invoiceSummary) => (
            <Grid container direction="column" spacing={2}>
              <PurchaseSummaryTable invoiceSummary={invoiceSummary} />
              <SessionSummaryTable invoiceSummary={invoiceSummary} />

              <Button
                variant="contained"
                color="primary"
                sx={{ width: "100%" }}
                onClick={() => navigate("/signup")}
              >
                Back to sessions
              </Button>
            </Grid>
          )}
        </Async.Fulfilled>
        <Async.Rejected>
          <Alert severity="error">Something went wrong</Alert>
        </Async.Rejected>
      </Async>
    </Grid>
  );
};