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

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

const AzureBlobGuideUrl = 'https://docs.pingcap.com/tidbcloud/changefeed-sink-to-cloud-storage#azure-blob-storage'

export function FormAzureBlob() {
  const isEditing = useIsEditingChangefeed()

  return (
    <Stack m={24} maw={1000}>
      <FormTextInput
        name="azure_blob_storage_info.endpoint.blob_uri"
        rules={{
          required: 'Blob URL is required',
          validate: (val) =>
            validateBucketURI(val, {
              sourceType: DataSourceType.azure,
              directory: true,
              enforceDirectoryTrailingSlash: false
            })
        }}
        label="Blob URL"
        placeholder="https://<account-name>.blob.core.windows.net/<container-name>/<prefix>/"
        disabled={isEditing}
      />

      <FormPasswordInput
        name="azure_blob_storage_info.endpoint.sas_token"
        rules={isEditing ? undefined : { required: 'SAS Token is required' }}
        label="SAS Token"
        placeholder="Enter a SAS token that provides access to the storage resource."
        description={
          <Typography component="span">
            TiDB requires your Azure Blob Storage endpoint and a SAS token to upload changeable data. Learn more about
            configuring your cloud storage in{' '}
            <a href={AzureBlobGuideUrl} target="_blank" rel="noreferrer">
              Guide Azure Blob Configuration for Changefeed
            </a>
            .
          </Typography>
        }
        autoComplete="off"
      />
    </Stack>
  )
}