import { Box, Button, Group, Typography } from '@tidbcloud/uikit'
import { FormTextInput } from '@tidbcloud/uikit/biz'
import { CopyText } from '@tidbcloud/uikit/biz'
import { IconSettings01 } from '@tidbcloud/uikit/icons'
import React, { useState } from 'react'

import { useImportServiceGetDataIngestionProfile } from 'dbaas/services/dataflow'
import useStores from 'dbaas/stores/useStores'
import { eventTracking } from 'dbaas/utils/tracking'

export const IAM: React.FC<
  React.PropsWithChildren<{
    provider: string
    clusterId: string
    readOnly?: boolean
  }>
> = ({ provider, clusterId, readOnly, children }) => {
  const {
    store: { tenantData, activeProjectId }
  } = useStores()

  const [showInfo, setShowInfo] = useState(false)
  const onShowClick = () => {
    setShowInfo(!showInfo)
  }

  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 (
    <div>
      {provider === 'aws' ? (
        <>
          <Typography mb={8}>
            Enter your AWS S3 IAM Role ARN Information, Refer to{' '}
            <a
              href="https://docs.pingcap.com/tidbcloud/import-csv-files/"
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => {
                eventTracking('Documentation Link Clicked', {
                  source: 'Iam',
                  content: 'AWS-S3'
                })
              }}
            >
              documentation
            </a>{' '}
            to learn why TiDB needs this information and where to find it.
          </Typography>
          <Group grow>
            <FormTextInput
              label="Role-ARN"
              name="role_arn"
              withAsterisk
              readOnly={readOnly}
              rules={{ required: 'Required' }}
              placeholder="arn:aw:iam:001234567890:role/myrole"
            />
            <div></div>
          </Group>
          <Typography my={8}>
            Retrieve the policy settings that TiDB Cloud needs to access you AWS sources. Refer to{' '}
            <a
              href="https://docs.pingcap.com/tidbcloud/public-preview/migrate-from-amazon-s3-or-gcs#step-2-configure-amazon-s3-access"
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => {
                eventTracking('Documentation Link Clicked', {
                  source: 'Iam',
                  content: 'policy settings'
                })
              }}
            >
              documentation
            </a>{' '}
            to learn what this information means and what to do with it.
          </Typography>
          <Button
            type="button"
            data-mp-event="Show AWS IAM policy settings Button Clicked"
            onClick={onShowClick}
            leftSection={<IconSettings01 size={16} />}
          >
            Show AWS IAM policy settings
          </Button>
          {children}
          {showInfo && (
            <Box>
              <Typography variant="label-lg" mb={8}>
                IAM Policy Settings
              </Typography>
              <Box bg="carbon.2" p={16} sx={(theme) => ({ borderRadius: theme.defaultRadius, marginBottom: 16 })}>
                <Box mb={8}>
                  <Typography variant="label-lg" display="inline-block" mr={24}>
                    TiDB Cloud Account ID
                  </Typography>
                  <CopyText value={ingestion.aws_account_id} bg="carbon.4">
                    {ingestion.aws_account_id}
                  </CopyText>
                </Box>
                <Box>
                  <Typography variant="label-lg" display="inline-block" mr={24}>
                    TiDB Cloud External ID
                  </Typography>
                  <CopyText value={ingestion.aws_external_id} bg="carbon.4">
                    {ingestion.aws_external_id}
                  </CopyText>
                </Box>
              </Box>
            </Box>
          )}
        </>
      ) : (
        <>
          <Typography mb={16}>
            Retrieve the account ID that TiDB Cloud needs to access your Google Cloud sources. Refer to the{' '}
            <a
              href="https://docs.pingcap.com/tidbcloud/import-parquet-files/"
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => {
                eventTracking('Documentation Link Clicked', {
                  source: 'Iam',
                  content: 'account ID'
                })
              }}
            >
              documentation
            </a>{' '}
            to learn what this information means and what to do with it.
          </Typography>
          <Button
            type="button"
            data-mp-event="Show Google Cloud Server Account ID Button Clicked"
            onClick={onShowClick}
            leftSection={<IconSettings01 size={16} />}
          >
            Show Google Cloud Server Account ID
          </Button>
          {children}
          {showInfo && (
            <>
              <Box
                bg="carbon.2"
                mt={16}
                p={16}
                sx={(theme) => ({ borderRadius: theme.defaultRadius, marginBottom: 16 })}
              >
                <Typography>Use this information in the Google Cloud Platform Console to configure access.</Typography>
                <Box mt={8}>
                  <Typography variant="label-lg" mr={24} display="inline-block">
                    Service Account ID
                  </Typography>
                  <CopyText value={ingestion.gcp_account_id} bg="carbon.4">
                    {ingestion.gcp_account_id}
                  </CopyText>
                </Box>
              </Box>
            </>
          )}
        </>
      )}
    </div>
  )
}