import { Button, Group, Image, Modal, Stack, TextInput, Typography } from '@tidbcloud/uikit'
import { FormTextInput } from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { useState } from 'react'
import { type RegisterOptions, useFormContext } from 'react-hook-form'

import step1 from './images/azure-step1.png'
import step2 from './images/azure-step2.png'

export const FormAzureSasTokenInput = ({
  name,
  label,
  placeholder,
  docLink,
  templateLink,
  rules
}: {
  name: string
  docLink: string
  templateLink: string
  label?: string
  placeholder?: string
  rules?: RegisterOptions
}) => {
  const [isModalOpen, { toggle, close }] = useDisclosure()
  const [sasToken, setSasToken] = useState('')
  const { setValue } = useFormContext()

  return (
    <>
      <FormTextInput
        name={name}
        label={label || 'SAS Token'}
        placeholder={placeholder || 'Enter a SAS token that provides access to the storage resource'}
        inputWrapperOrder={['label', 'input', 'description', 'error']}
        rules={rules}
        description={
          <span>
            Don't have a SAS Token?{' '}
            <a onClick={toggle} target="_blank" rel="noopener noreferrer">
              Click here to create a new one with Azure ARM template.
            </a>
          </span>
        }
      />

      <Modal
        centered
        title="Generate New SAS Token via ARM Template Deployment"
        opened={isModalOpen}
        onClose={close}
        size={732}
      >
        <Stack>
          <Typography variant="body-lg">
            <a href={templateLink} target="_blank" rel="noopener noreferrer">
              Click to open the Azure Portal with the pre-configured ARM template
            </a>
            , fill in the necessary details in the Azure Portal, like Subscription and Resource Group, and click ‘Review
            + create’.
          </Typography>

          <Image src={step1} />

          <Typography variant="body-lg">
            Review and click ‘Create’ to proceed with the deployment. Once it completes, navigate to the Outputs
            section.
          </Typography>

          <Image src={step2} />

          <div>
            <Typography variant="body-lg" mb={8}>
              Copy the generated SAS token (accountSas) and paste into the field below.
            </Typography>

            <TextInput
              placeholder="Paste the SAS token value here"
              value={sasToken}
              onChange={(e) => setSasToken(e.target.value)}
            />
          </div>

          <Group justify="space-between">
            <Typography variant="body-lg">
              Having trouble?{' '}
              <a href={docLink} target="_blank" rel="noopener noreferrer">
                Create a SAS token manually.
              </a>
            </Typography>

            <Group>
              <Button variant="default" onClick={close}>
                Cancel
              </Button>
              <Button
                onClick={() => {
                  setValue(name, sasToken)
                  close()
                }}
                disabled={!sasToken}
              >
                Confirm
              </Button>
            </Group>
          </Group>
        </Stack>
      </Modal>
    </>
  )
}