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

import { PropertyKV } from 'dbaas/components/PropertyKV'
import { useTidbServiceUpdateTidb } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
import { TidbCloudOpenApinextgenv1beta2Tidb } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import useStores from 'dbaas/stores/useStores'
import { tidbDisplayNameRules } from 'dbaas/utils/validationRules'

interface PremiumRenameModalProps {
  tidb: TidbCloudOpenApinextgenv1beta2Tidb
  opened: boolean
  onClose: () => void
  onFinish?: () => Promise<unknown> | void
}

export const PremiumRenameModal = observer(({ tidb, opened, onClose, onFinish }: PremiumRenameModalProps) => {
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()

  const form = useForm({
    mode: 'onChange',
    defaultValues: {
      displayName: ''
    }
  })
  const { watch } = form
  const displayName = watch('displayName')

  const mutator = useTidbServiceUpdateTidb({
    mutation: {
      onSuccess: async () => {
        await onFinish?.()
        onClose()
        notifier.success('The instance is successfully renamed.')
      }
    }
  })
  const onRename = () => {
    if (!tidb?.tidbId) {
      notifier.error('The instance is not found.')

      return
    }

    return mutator.mutateAsync({
      tidbId: tidb.tidbId,
      data: {
        displayName
      },
      params: {
        orgId,
        projectId
      }
    })
  }

  return (
    <Modal
      size="lg"
      centered
      trapFocus={false}
      closeOnClickOutside={false}
      opened={opened}
      onClose={onClose}
      onExitTransitionEnd={() => {
        form.reset()
      }}
      title="Rename your instance"
    >
      <Form
        form={form}
        onSubmit={onRename}
        onCancel={onClose}
        actionsProps={{
          confirmText: 'Confirm',
          cancelText: 'Cancel',
          confirmProps: {
            disabled: !displayName
          }
        }}
      >
        <PropertyKV label="Current Name" labelProps={{ w: 96 }} align="center">
          {tidb.displayName}
        </PropertyKV>
        <PropertyKV label="New Name" labelProps={{ w: 96, lh: '40px' }} valueProps={{ flex: 1 }}>
          <FormTextInput
            name="displayName"
            placeholder="Enter the new name of your instance"
            autoFocus
            rules={tidbDisplayNameRules}
          />
        </PropertyKV>
      </Form>
    </Modal>
  )
})