import { Divider, Flex, Modal, Typography } from '@tidbcloud/uikit'
import { Form, FormTextInput } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useForm } from 'react-hook-form'

import { ModalCodeTitle } from 'dbaas/components'
import { useRenameWarehouse } from 'dbaas/services/warehouse'
import { DtoWarehouseInfoDTO } from 'dbaas/services/warehouse/interface'
import useStores from 'dbaas/stores/useStores'
import { warehouseNameRules } from 'dbaas/utils/validationRules'

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

export const WarehouseRenameModal = observer(({ warehouse, opened, onClose, onFinish }: ClusterRenameModalProps) => {
  const {
    store: {
      tenantData: { id: orgId }
    }
  } = useStores()
  const { id } = warehouse

  const form = useForm<{ inputLakeName: string }>({
    mode: 'onChange',
    defaultValues: {
      inputLakeName: ''
    }
  })
  const { watch } = form
  const inputLakeName = watch('inputLakeName')

  const closeModal = () => {
    form.reset()
    onClose()
  }

  const mutator = useRenameWarehouse({
    mutation: {
      onSuccess: () => {
        onFinish?.()
        closeModal()
      }
    }
  })

  const renameHandler = async () => {
    return await mutator.mutateAsync({
      orgId,
      warehouseName: id!,
      data: {
        newName: inputLakeName
      }
    })
  }

  return (
    <Modal
      title={
        <>
          Rename <ModalCodeTitle maxWidth={400}>{id}</ModalCodeTitle>
        </>
      }
      size={678}
      centered
      trapFocus={false}
      closeOnClickOutside={false}
      opened={opened}
      onClose={closeModal}
    >
      <Form
        onSubmit={renameHandler}
        onCancel={closeModal}
        form={form}
        actionsProps={{
          confirmText: 'Confirm',
          cancelText: 'Cancel',
          cancelProps: {
            'data-mp-event': 'Warehouse cancel button clicked'
          },
          confirmProps: {
            disabled: !inputLakeName,
            'data-mp-event': 'Warehouse confirm button clicked'
          }
        }}
      >
        <Divider mx="-xl" mt="-xl" />
        <Flex gap={16} mt={8}>
          <Typography w={200}>Current Name</Typography>
          <Typography>{id}</Typography>
        </Flex>
        <Flex gap={16} align="center" my={8}>
          <Typography w={200}>New Name</Typography>
          <FormTextInput
            sx={{ flex: 1 }}
            name="inputLakeName"
            placeholder="Enter the new name of your resource"
            autoFocus
            maxLength={255}
            rules={warehouseNameRules}
          />
        </Flex>
        <Divider mx="-xl" />
      </Form>
    </Modal>
  )
})