import { Group, Modal, notifier, SelectProps } from '@tidbcloud/uikit'
import { Box, Typography } from '@tidbcloud/uikit'
import { Form, FormSelect } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'

import { AccessGuard } from 'dbaas/contexts/access-control'
import { useFetchProviders } from 'dbaas/features/ClusterManagement/common/profile'
import { CloudProviderConst } from 'dbaas/features/Project'

import AwsCreateContent from './AwsCreateContent'
import { AzureCreateContent } from './AzureCreateContent'
import { AzureAvailableCmekRegions, CmekRegionRenderOption } from './CmekRegionRenderItem'
import { useCmekList } from './helper'

const providerChangeHandler = (providers, provider, cmekList) => {
  const regionList =
    providers
      .find((v) => v.name === provider)
      ?.regions.map((v) => ({
        label: v.display_name,
        value: v.name,
        provider: provider,
        disabled:
          cmekList?.cmeks?.some((item) => item.regionId === `${provider}-${v.name}`) ||
          (provider === CloudProviderConst.AZURE && !AzureAvailableCmekRegions.includes(v.name))
      })) ?? []

  return {
    regions: regionList,
    region: regionList.find((v) => !v.disabled)?.value || ''
  }
}

interface FormValues {
  provider: string
  region: string
  arn: string
}

interface CreateFormProps {
  opened: boolean
  onClose: () => void
}

export const CreateForm = observer(({ opened, onClose }: CreateFormProps) => {
  const formProps = useForm<FormValues>({
    defaultValues: { provider: 'aws', arn: '', region: '' }
  })
  const [regions, setRegions] = useState<SelectProps['data']>([])

  const { watch, setValue, reset } = formProps
  const provider = watch('provider')

  const {
    query: { data: { cloud_providers: providers = [] } = {} }
  } = useFetchProviders(
    { tier: 'dedicated' },
    {
      query: {
        refetchOnWindowFocus: false
      }
    }
  )

  const { data: cmekList, refetch } = useCmekList()

  useEffect(() => {
    if (!opened) {
      reset()
    }

    if (opened) {
      const { regions, region } = providerChangeHandler(providers, provider, cmekList)
      setRegions(regions)
      setValue('region', region)
    }
  }, [opened])

  const submitSuccCb = () => {
    onClose()
    refetch()

    notifier.info(
      <Typography>
        Encryption key has been created successfully. go to
        <AccessGuard id="ClusterCreationGate" fallback="create cluster">
          <a href="/clusters/create-cluster">create cluster</a>
        </AccessGuard>
      </Typography>,
      { w: 520 }
    )
  }

  const encryptionType = (
    <Box px="xl" pt="xl">
      <Typography variant="title-lg" mb={4}>
        Encryption Service
      </Typography>
      <Typography variant="body-lg">
        Encryption key creation only supports one unique key per cloud and region, and cannot be changed once created.
      </Typography>
      <Group gap={16} mt={16} grow>
        <FormSelect
          name="provider"
          label="Key Management Service"
          rules={{ required: 'Required' }}
          data={[
            { label: 'AWS KMS', value: 'aws' },
            { label: 'Azure Key Vault', value: 'azure' },
            { label: 'Google KMS', value: 'gcp', disabled: true }
          ]}
          onChange={(value) => {
            const { regions, region } = providerChangeHandler(providers, value, cmekList)
            setRegions(regions)
            setValue('region', region)
          }}
        />

        <FormSelect
          name="region"
          label="Region"
          rules={{ required: 'Required' }}
          data={regions}
          renderOption={CmekRegionRenderOption}
        ></FormSelect>
      </Group>
    </Box>
  )

  return (
    <Modal
      size={800}
      styles={{ body: { padding: 0 } }}
      opened={opened}
      onClose={() => {
        onClose()
      }}
      title={
        <Typography variant="title-lg" c="carbon.9">
          Create Encryption Key
        </Typography>
      }
      closeOnClickOutside={false}
    >
      <Form form={formProps} formMode="onChange" onSubmit={() => {}} withActions={false}>
        {encryptionType}
        {provider === CloudProviderConst.AWS && <AwsCreateContent onClose={() => onClose()} onSubmit={submitSuccCb} />}
        {provider === CloudProviderConst.AZURE && (
          <AzureCreateContent onClose={() => onClose()} onSubmit={submitSuccCb} />
        )}
      </Form>
    </Modal>
  )
})

export default CreateForm