import { Button } from "@mui/material";
import {
  joinSession,
  leaveSession,
  type Session,
  type Tokens,
} from "../../api/client";
import { Async } from "react-async";
import { useNavigate } from "react-router";

export const SessionAction = (props: {
  session: Session;
  tokensPromise: Promise<Tokens>;
}) => {
  const { session, tokensPromise } = props;
  const navigate = useNavigate();

  if (session.status !== "OPEN") {
    return (
      <Button
        variant="contained"
        disabled
        color="primary"
        sx={{ width: "100%" }}
      >
        SESSION {session.status}
      </Button>
    );
  }

  if (session.includesRequester) {
    return (
      <Button
        variant="contained"
        color="primary"
        sx={{ width: "100%" }}
        onClick={async () => {
          await leaveSession(session.id);
          window.location.reload();
        }}
      >
        Sign out
      </Button>
    );
  }

  if (session.userCount >= session.size) {
    return (
      <Button
        variant="contained"
        disabled
        color="primary"
        sx={{ width: "100%" }}
      >
        SESSION FULL
      </Button>
    );
  }

  const renderLoadingButton = () => (
    <Button variant="contained" color="primary" disabled sx={{ width: "100%" }}>
      LOADING
    </Button>
  );

  const renderBuyTokensButton = () => (
    <Button
      variant="contained"
      color="primary"
      sx={{ width: "100%" }}
      onClick={() => navigate("/buy")}
    >
      BUY TOKENS
    </Button>
  );

  const renderSignInButton = () => (
    <Button
      variant="contained"
      color="primary"
      sx={{ width: "100%" }}
      onClick={async () => {
        await joinSession(session.id);
        window.location.reload();
      }}
    >
      SIGN UP
    </Button>
  );

  return (
    <Async promise={tokensPromise}>
      <Async.Loading>{renderLoadingButton()}</Async.Loading>
      <Async.Fulfilled<Tokens>>
        {(tokens) =>
          tokens.available === 0
            ? renderBuyTokensButton()
            : renderSignInButton()
        }
      </Async.Fulfilled>
    </Async>
  );
};