import { Card, Group, Loader, Stack, TextInput, Typography } from '@tidbcloud/uikit'
import { FormPasswordInput, FormRadioGroup, FormTextInput } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useFormContext } from 'react-hook-form'

import CopyButton from 'dbaas/components/CopyButton'
import { useImportServiceGetDataIngestionProfile as useDedicatedGetDataIngestionProfile } from 'dbaas/services/dataflow'
import useStores from 'dbaas/stores/useStores'

interface GCSBucketAccessProps {
  authTypeFormName: string
  accessKeyFormName: string
  accessKeySecretFormName: string
}

/**
 * @deprecated
 * GCS Bucket Access with access key not supported for now
 */
const _GCSBucketAccess = ({ authTypeFormName, accessKeyFormName, accessKeySecretFormName }: GCSBucketAccessProps) => {
  const {
    store: { tenantData, activeProjectId, currentCluster }
  } = useStores()
  const { watch } = useFormContext()
  const accessType = watch(authTypeFormName)
  const { data } = useDedicatedGetDataIngestionProfile(tenantData.id, activeProjectId, currentCluster?.id!)

  return (
    <Stack>
      <FormRadioGroup
        name={authTypeFormName}
        data={[
          {
            label: 'GCS IAM Role',
            value: 'manual'
          }
        ]}
        label={'Bucket Access'}
        defaultValue={'manual'}
      />

      {accessType === 'access_key' && (
        <>
          <FormTextInput name={accessKeyFormName} label="Access Key" placeholder="Access key" autoComplete="off" />
          <FormPasswordInput
            name={accessKeySecretFormName}
            label="Secret Key"
            placeholder="Secret key"
            autoComplete="off"
          />
        </>
      )}

      {accessType === 'manual' && (
        <Card shadow="unset">
          <Typography variant="body-lg" mb={16}>
            Please make sure that you refer to{' '}
            <a
              href="https://docs.pingcap.com/tidbcloud/dedicated-external-storage#configure-gcs-access"
              target="_blank"
              rel="noopener noreferrer"
            >
              Configure GCS Access
            </a>{' '}
            to allow TiDB Cloud to access the source data in your GCS bucket with the following ID.
          </Typography>

          <Stack gap={4}>
            <Typography variant="label-lg" fw={500}>
              Google Cloud Service Account ID
            </Typography>

            <Card withBorder shadow="unset" p={0}>
              <Group justify="space-between" pl={8}>
                <Typography>{data?.gcp_account_id}</Typography>
                <CopyButton text={data?.gcp_account_id ?? ''} icon menuName="Import V3 GCS Account ID" />
              </Group>
            </Card>
          </Stack>
        </Card>
      )}
    </Stack>
  )
}

export const GCSBucketAccess = observer(_GCSBucketAccess)

interface FormGCSServiceAccountIdReadonlyProps {
  gcpAccountId?: string
  isLoading?: boolean
  docUrl: string

  /**
   * default to true, if true, use the default `useDedicatedGetDataIngestionProfile` to get the gcp account id
   */
  useDefaultProfile?: boolean
}

export const FormGCSServiceAccountIdReadonly = observer((props: FormGCSServiceAccountIdReadonlyProps) => {
  const {
    store: { tenantData, activeProjectId, currentCluster }
  } = useStores()
  const { data, isLoading: isLoadingData } = useDedicatedGetDataIngestionProfile(
    tenantData.id,
    activeProjectId,
    currentCluster?.id!,
    {
      query: {
        refetchOnWindowFocus: false,
        enabled: props.useDefaultProfile ?? true
      }
    }
  )

  const gcpAccountId = props.gcpAccountId ?? data?.gcp_account_id ?? ''
  const isLoading = isLoadingData || props.isLoading

  return (
    <TextInput
      label="Google Cloud Service Account ID"
      disabled
      value={gcpAccountId}
      rightSection={isLoading ? <Loader size="xs" /> : <CopyButton text={gcpAccountId} icon />}
      description={
        <span>
          Please make sure that you refer to{' '}
          <a href={props.docUrl} target="_blank" rel="noopener noreferrer">
            Configure GCS Access
          </a>{' '}
          to allow TiDB Cloud to access the source data in your GCS bucket with the following ID.
        </span>
      }
    />
  )
})