import { Group, Paper, Stack, Typography } from '@tidbcloud/uikit'
import { FormTextInput } from '@tidbcloud/uikit/biz'

import { CopyButton } from 'dbaas/components/CopyButton'
import { useIsEditingChangefeed } from 'dbaas/features/Changefeed'
import { DataSourceType } from 'dbaas/features/Import'
import { validateBucketURI } from 'dbaas/features/Import/validator'

export function FormGCS({ gcp_account_id }: { gcp_account_id?: string }) {
  const isEditing = useIsEditingChangefeed()

  return (
    <Stack m={24} maw={1000}>
      <FormTextInput
        name="gcs_info.endpoint.gcsUri"
        rules={{ validate: (val) => validateBucketURI(val, { sourceType: DataSourceType.gcs }) }}
        label="Bucket gsutil URI"
        description={
          <Typography component="span">
            Please refer to this{' '}
            <a
              href="https://docs.pingcap.com/tidbcloud/changefeed-sink-to-cloud-storage#create-a-changefeed"
              target="_blank"
              rel="noreferrer"
            >
              document
            </a>{' '}
            to learn how to setup bucket
          </Typography>
        }
        placeholder="gs://tidbcloud-samples/data-ingestion/"
        disabled={isEditing}
      />

      <Stack gap={0}>
        <Typography variant="label-lg">Google Cloud Service Account ID</Typography>
        <Paper withBorder p={0} shadow="none" sx={(theme) => ({ borderColor: theme.colors.carbon[4] })}>
          <Group justify="space-between" pl={8}>
            <Typography variant="body-md">{gcp_account_id ?? ''}</Typography>
            <CopyButton text={gcp_account_id ?? ''} icon />
          </Group>
        </Paper>
      </Stack>
    </Stack>
  )
}