import { Button } from "@mui/material";
import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { APIToken, APITokenURL, TokensApi } from "../api/TokensApi";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import {
  APITokenDetails,
  TokenWidgetStatus,
} from "../widgets/tokens/APITokenDetails";

export function ViewApiTokenRoute() {
  const { id } = useParams();

  const [token, setToken] = React.useState<APIToken | undefined>();

  const load = async () => {
    setToken(await TokensApi.GetSingle(id!));
  };

  return (
    <AsyncWidget
      loadKey={id}
      ready={token !== undefined}
      errMsg="Failed to fetch API token information!"
      load={load}
      build={() => <ViewAPITokenRouteInner token={token!} />}
    />
  );
}

function ViewAPITokenRouteInner(p: { token: APIToken }): React.ReactElement {
  const navigate = useNavigate();

  return (
    <VirtWebRouteContainer
      label={`API token ${p.token.name}`}
      actions={
        <span style={{ display: "flex", alignItems: "center" }}>
          <Button
            variant="contained"
            style={{ marginLeft: "15px" }}
            onClick={() => navigate(APITokenURL(p.token, true))}
          >
            Edit
          </Button>
        </span>
      }
    >
      <APITokenDetails token={p.token} status={TokenWidgetStatus.Read} />
    </VirtWebRouteContainer>
  );
}