import { readFile } from '@tidb-cloud/ui-components'
import { Box, Typography, Dropzone, Group, ActionIcon } from '@tidbcloud/uikit'
import { IconCheckCircle, IconFileImport02, IconTrash01, IconXCircle } from '@tidbcloud/uikit/icons'
import { Controller } from 'react-hook-form'

export const FormGCSBucketAccessUploader = ({ name, label }: { name: string; label: string }) => {
  return (
    <Controller
      name={name}
      render={({ field }) => (
        <Box>
          <Typography variant="label-lg" mb={8}>
            {label}
          </Typography>

          <Dropzone
            multiple={false}
            onDrop={async (files) => {
              const content = await readFile(files[0])
              field.onChange({
                content: window.btoa(content),
                name: files[0].name
              })
            }}
            sx={(theme) => ({
              backgroundColor: theme.colors.gray[2],
              display: field.value?.content ? 'none' : 'block',
              border: `1px dashed ${theme.colors.gray[7]}`,
              '& .mantine-Text-root': {
                color: theme.colors.carbon[7]
              },
              '&:hover': {
                backgroundColor: theme.colors.gray[2]
              },
              '&[data-accept]': {
                backgroundColor: theme.colors.peacock[1],
                borderColor: theme.colors.peacock[7],

                '& .mantine-Text-root': {
                  color: theme.colors.peacock[7]
                }
              },
              '&[data-reject]': {
                backgroundColor: theme.colors.red[1],
                borderColor: theme.colors.red[7],

                '& .mantine-Text-root': {
                  color: theme.colors.red[7]
                }
              }
            })}
            py={24}
          >
            <Group>
              <Dropzone.Idle>
                <IconFileImport02 size={32} c="carbon.7" />
              </Dropzone.Idle>
              <Dropzone.Accept>
                <IconCheckCircle size={32} c="peacock.7" />
              </Dropzone.Accept>
              <Dropzone.Reject>
                <IconXCircle size={32} c="red.7" />
              </Dropzone.Reject>

              <Typography fw={700} fz={16}>
                Drag and drop or click and select to upload the Service Account Key.
              </Typography>
            </Group>
          </Dropzone>

          {!field.value?.content && (
            <Typography variant="body-sm" c="carbon.7">
              Not sure what is Service Account Key?{' '}
              <a
                href="https://docs.pingcap.com/tidbcloud/configure-external-storage-access/#configure-gcs-access"
                target="_blank"
                rel="noopener noreferrer"
              >
                Click here to learn how to get one.
              </a>
            </Typography>
          )}

          {field.value?.content && (
            <Group>
              <Group gap={8}>
                <IconFileImport02 size={16} />
                <Typography variant="body-lg">{field.value.name}</Typography>
              </Group>

              <ActionIcon
                variant="transparent"
                onClick={() =>
                  field.onChange({
                    content: '',
                    name: ''
                  })
                }
              >
                <IconTrash01 size={16} />
              </ActionIcon>
            </Group>
          )}
        </Box>
      )}
    />
  )
}