import {
  ActionIcon,
  Box,
  CopyButton,
  Flex,
  Tooltip,
  Typography
} from '@tidbcloud/uikit'
import { IconCheck, IconCopy03 } from '@tidbcloud/uikit/icons'

export const IAMPolicy = ({
  accountId,
  externalId
}: {
  accountId: string
  externalId: string
}) => {
  return (
    <Box
      w={296}
      p={24}
      sx={(t) => ({
        backgroundColor: t.colors.carbon[2],
        borderRadius: t.defaultRadius
      })}
    >
      <AwsIamPolicy accountId={accountId} externalId={externalId} />
    </Box>
  )
}

export const AwsIamPolicy = ({
  accountId,
  externalId
}: {
  accountId: string
  externalId: string
}) => {
  return (
    <>
      <Typography variant="title-sm" mb={8}>
        AWS IAM Policy Settings
      </Typography>
      <Typography variant="body-sm">
        Retrieve the policy settings that TiDB Cloud needs to access you AWS
        sources. Refer to{' '}
        <a
          href="https://docs.pingcap.com/tidbcloud/tidb-cloud-auditing#enable-audit-logging-for-aws"
          target="_blank"
          rel="noopener noreferrer"
        >
          documentation link
        </a>
        .
      </Typography>
      <Typography variant="body-lg" mt={16} mb={8}>
        TiDB Cloud Account ID
      </Typography>
      <Flex>
        <Typography variant="title-md" sx={{ wordBreak: 'break-all' }}>
          {accountId}
        </Typography>
        <CopyButton value={accountId} timeout={2000}>
          {({ copied, copy }) => (
            <Tooltip
              label={copied ? 'Copied' : 'Copy'}
              withArrow
              position="right"
            >
              <ActionIcon
                variant="transparent"
                size="sm"
                c="carbon.8"
                onClick={copy}
              >
                {copied ? (
                  <IconCheck size={14} />
                ) : (
                  <IconCopy03 size={14} strokeWidth={2} onClick={copy} />
                )}
              </ActionIcon>
            </Tooltip>
          )}
        </CopyButton>
      </Flex>
      <Typography variant="body-lg" my={8}>
        TiDB Cloud External ID
      </Typography>
      <Flex>
        <Typography variant="title-md" sx={{ wordBreak: 'break-all' }}>
          {externalId}
        </Typography>
        <CopyButton value={externalId} timeout={2000}>
          {({ copied, copy }) => (
            <Tooltip
              label={copied ? 'Copied' : 'Copy'}
              withArrow
              position="right"
            >
              <ActionIcon
                variant="transparent"
                size="sm"
                c="carbon.8"
                onClick={copy}
              >
                {copied ? (
                  <IconCheck size={14} />
                ) : (
                  <IconCopy03 size={14} strokeWidth={2} onClick={copy} />
                )}
              </ActionIcon>
            </Tooltip>
          )}
        </CopyButton>
      </Flex>
    </>
  )
}