import { Code, Modal, notifier, Stack, Typography } from '@tidbcloud/uikit'
import { Form, FormTextInput } from '@tidbcloud/uikit/biz'
import { useMemoizedFn } from 'ahooks'
import { observer } from 'mobx-react'
import { useForm } from 'react-hook-form'

import { ModalCodeTitle } from 'dbaas/components'
import { deleteWarehouse } from 'dbaas/services/warehouse'
import { DtoWarehouseInfoDTO } from 'dbaas/services/warehouse/interface'
import useStores from 'dbaas/stores/useStores'
import { eventTracking } from 'dbaas/utils/tracking'

interface WarehouseDeletionModallProps {
  warehouse: DtoWarehouseInfoDTO
  opened: boolean
  onClose: () => void
  onFinish?: () => Promise<unknown> | void
}

export const WarehouseDeletionModal = observer(
  ({ warehouse, opened, onClose, onFinish }: WarehouseDeletionModallProps) => {
    const {
      store: {
        lastVisitLocation: { orgId },
        tenantData: { name: orgName }
      }
    } = useStores()

    const warehouseName = warehouse?.id

    const onCloseButtonClick = useMemoizedFn(() => {
      onClose()
      eventTracking('Close Delete Modal', {
        clusterType: 'warehouse'
      })
    })

    const form = useForm<{ inputWarehouseName: string }>({
      mode: 'onChange',
      defaultValues: { inputWarehouseName: '' }
    })
    const { watch, reset } = form
    const inputWarehouseName = watch('inputWarehouseName')
    const confirmationName = `${orgName}/${warehouseName}`.trim()
    const isConfirmationMatched = inputWarehouseName === confirmationName

    const onSubmit = useMemoizedFn(async () => {
      await deleteWarehouse(orgId, warehouseName!)
      await onFinish?.()
      onClose()
      notifier.success('The warehouse is successfully deleted.')
    })

    return (
      <Modal
        size="xl"
        opened={opened}
        centered
        trapFocus={false}
        onClose={onCloseButtonClick}
        onExitTransitionEnd={() => reset()}
        title={
          <>
            Delete <ModalCodeTitle maxWidth={400}>{warehouseName}</ModalCodeTitle> Resource
          </>
        }
      >
        <Stack>
          <Typography variant="body-lg">Warehouse do not support restoring data after deletion.</Typography>

          <Typography variant="body-lg">
            To confirm, type{' '}
            <Code fz={13} fw={600} bg="carbon.3" c="carbon.9" sx={{ whiteSpace: 'pre-wrap' }}>
              {confirmationName}
            </Code>{' '}
            in the box below.
          </Typography>

          <Form
            layout="none"
            form={form}
            onSubmit={onSubmit}
            onCancel={onClose}
            actionsProps={{
              confirmText: 'I understand, delete it.',
              confirmProps: {
                color: 'red',
                variant: 'light',
                disabled: !isConfirmationMatched,
                'data-mp-event': 'Deleted A Warehouse'
              },
              cancelProps: {
                'data-mp-event': 'Cancel Delete Modal Button Clicked'
              }
            }}
          >
            <FormTextInput
              name="inputWarehouseName"
              autoFocus
              rules={{
                required: 'Required',
                validate: (value) => value === confirmationName || 'Incorrect warehouse name'
              }}
            />
          </Form>
        </Stack>
      </Modal>
    )
  }
)

export default WarehouseDeletionModal