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

import { CloudProviderConst } from 'dbaas/features/Project'
import { useImportServiceGetDataIngestionProfile } from 'dbaas/services/dataflow'
import useStores from 'dbaas/stores/useStores'

export const IAMPolicy: React.FC<
  React.PropsWithChildren<{
    clusterId: string
    provider: string
  }>
> = ({ clusterId, provider }) => {
  const {
    store: { tenantData, activeProjectId }
  } = useStores()

  const { data } = useImportServiceGetDataIngestionProfile(tenantData.id, activeProjectId, clusterId, {
    query: {
      enabled: Boolean(clusterId && tenantData.id && activeProjectId)
    }
  })
  const ingestion = data ?? {
    type: '',
    aws_external_id: '',
    aws_account_id: '',
    gcp_account_id: ''
  }

  return (
    <Box
      w={296}
      p={24}
      sx={(t) => ({
        backgroundColor: t.colors.carbon[2],
        borderRadius: t.defaultRadius
      })}
    >
      {provider === CloudProviderConst.AWS ? (
        <AwsIamPolicy accountId={ingestion.aws_account_id} externalId={ingestion.aws_external_id} />
      ) : (
        <GcpAccount accountId={ingestion.gcp_account_id} />
      )}
    </Box>
  )
}

export const AwsIamPolicy: React.FC<
  React.PropsWithChildren<{
    accountId: string
    externalId: string
  }>
> = ({ accountId, externalId }) => {
  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>
    </>
  )
}

export const GcpAccount: React.FC<
  React.PropsWithChildren<{
    accountId: string
  }>
> = ({ accountId }) => {
  return (
    <>
      <Typography variant="title-sm" mb={8}>
        Google Cloud Server Account ID
      </Typography>
      <Typography variant="body-sm">
        Use this information in the Google Cloud Platform Console to configure access. Refer to
        <Anchor
          href="https://docs.pingcap.com/tidbcloud/tidb-cloud-auditing#enable-audit-logging-for-google-cloud"
          target="_blank"
          rel="noopener noreferrer"
          ml={4}
        >
          documentation link
        </Anchor>
        .
      </Typography>
      <Typography variant="body-lg" mt={16} mb={8}>
        Service Account ID
      </Typography>
      <Flex>
        <Typography variant="title-md">{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>
    </>
  )
}