import { Alert, Grid, Paper, Typography } from "@mui/material";
import { useMemo } from "react";
import { Async } from "react-async";
import {
  getAllSessions,
  getAvailableTokenCount,
  type Session,
  type Tokens,
} from "../../api/client";
import { SessionPicker } from "./SessionPicker";
import { TokensSummary } from "./TokensSummary";

export const SignUpPage = () => {
  const sessionsPromise = useMemo(getAllSessions, []);
  const tokensPromise = getAvailableTokenCount();

  return (
    <Grid container direction="column" spacing={2} alignItems="center">
      <Typography variant="h3">Pick a date</Typography>
      <Paper
        variant="outlined"
        sx={{
          p: 3,
          bgcolor: "aliceblue",
          borderRadius: 4,
        }}
      >
        <Async promise={sessionsPromise}>
          <Async.Loading>Loading</Async.Loading>
          <Async.Fulfilled<Session[]>>
            {(sessions) =>
              sessions.length === 0 ? (
                <Alert severity="warning">No sessions are available</Alert>
              ) : (
                <SessionPicker
                  sessions={sessions}
                  tokensPromise={tokensPromise}
                />
              )
            }
          </Async.Fulfilled>
          <Async.Rejected>
            <Alert severity="error">Something went wrong</Alert>
          </Async.Rejected>
        </Async>
      </Paper>
      <Async promise={tokensPromise}>
        <Async.Fulfilled<Tokens>>
          {(tokens) => <TokensSummary tokens={tokens} />}
        </Async.Fulfilled>
        <Async.Rejected>
          <Alert severity="error">Something went wrong</Alert>
        </Async.Rejected>
      </Async>
    </Grid>
  );
};