import {
  Alert,
  Button,
  CopyField,
  CopyInput,
  Dialog,
  ExternalLink,
  Flex,
  Heading,
  Label,
  Text,
  View,
} from "@phoenix/components";
import { CodeWrap, PythonBlockWithCopy } from "@phoenix/components/code";
import { BashBlockWithCopy } from "@phoenix/components/code/BashBlockWithCopy";
import {
  DialogCloseButton,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTitleExtra,
} from "@phoenix/components/core/dialog";

/**
 * Displays the key one time for the user to copy.
 */
export function OneTimeAPIKeyDialog(props: { jwt: string }) {
  const { jwt } = props;
  return (
    <Dialog>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>New API Key Created</DialogTitle>
          <DialogTitleExtra>
            <DialogCloseButton slot="close" />
          </DialogTitleExtra>
        </DialogHeader>
        <Alert variant="success" banner>
          You have successfully created a new API key. The API key will only be
          displayed once below. Please copy and save it in a secure location.
        </Alert>
        <View padding="size-200">
          <CopyField value={jwt}>
            <Label>API Key</Label>
            <CopyInput />
          </CopyField>
        </View>
        <View padding="size-200" borderTopColor="default" borderTopWidth="thin">
          <Heading level={2} weight="heavy">
            How to Use the API Key
          </Heading>
          <View paddingBottom="size-100" paddingTop="size-100">
            <Text>
              When interacting with Phoenix clients and OTEL SDKs, set the
              environment variable
            </Text>
          </View>
          <CodeWrap>
            <BashBlockWithCopy value={`PHOENIX_API_KEY=${jwt}`} />
          </CodeWrap>
          <View paddingBottom="size-100" paddingTop="size-100">
            <Text>
              When using OpenTelemetry SDKs pass the API key in the headers
            </Text>
          </View>
          <CodeWrap>
            <BashBlockWithCopy
              value={`OTEL_EXPORTER_OTLP_HEADERS='Authorization=Bearer ${jwt}'`}
            />
          </CodeWrap>
          <View paddingBottom="size-100" paddingTop="size-100">
            <Text>
              When using the Phoenix REST and GraphQL APIs, pass the API key as
              a{" "}
              <ExternalLink href="https://swagger.io/docs/specification/authentication/bearer-authentication/">
                bearer token
              </ExternalLink>
              .
            </Text>
          </View>
          <CodeWrap>
            <PythonBlockWithCopy value={`Authorization: Bearer ${jwt}`} />
          </CodeWrap>
        </View>
        <View padding="size-200" borderTopColor="default" borderTopWidth="thin">
          <Flex direction="row" justifyContent="end">
            <Button variant="primary" aria-label="dismiss" slot="close">
              Close
            </Button>
          </Flex>
        </View>
      </DialogContent>
    </Dialog>
  );
}
