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 { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { useServerlessServicePartialUpdateCluster } from 'dbaas/services/api-clients/v2023/serverless/v1beta1'
import useStores from 'dbaas/stores/useStores'
import { MixpanelEvents } from 'dbaas/utils/tracking'
import { clusterNameRules } from 'dbaas/utils/validationRules'

interface ClusterRenameModalProps {
  cluster: Pick<SharedCluster, 'id' | 'name' | 'servicePlan'>
  opened: boolean
  onClose: () => void
  onFinish?: () => Promise<unknown> | void
}

export const ClusterRenameModal = observer(({ cluster, opened, onClose, onFinish }: ClusterRenameModalProps) => {
  const {
    store: {
      tenantData: { id: orgId },
      activeProjectId: projectId
    }
  } = useStores()
  const { id: clusterId, name: clusterName, servicePlan } = cluster

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

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

  const mutator = useServerlessServicePartialUpdateCluster({
    mutation: {
      onSuccess: () => {
        onFinish?.()
        closeModal()
      }
    }
  })
  const renameHandler = async () => {
    return await mutator.mutateAsync({
      clusterId,
      data: {
        cluster: {
          displayName: inputClusterName
        },
        updateMask: 'displayName'
      },
      params: {
        orgId,
        projectId
      }
    })
  }

  return (
    <Modal
      title="Rename"
      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': MixpanelEvents.TidbDisplayName.Update.CancelClicked,
            'data-mp-service-plan': servicePlan
          },
          confirmProps: {
            disabled: !inputClusterName,
            'data-mp-event': MixpanelEvents.TidbDisplayName.Update.SubmitClicked,
            'data-mp-service-plan': servicePlan
          }
        }}
      >
        <Divider mx="-xl" mt="-xl" />
        <Flex gap={16} mt={8}>
          <Typography w={200}>Current Name</Typography>
          <Typography>{clusterName}</Typography>
        </Flex>
        <Flex gap={16} align="center" my={8}>
          <Typography w={200}>New Name</Typography>
          <FormTextInput
            sx={{ flex: 1 }}
            name="inputClusterName"
            placeholder="Enter the new name of your cluster"
            autoFocus
            rules={clusterNameRules}
          />
        </Flex>
        <Divider mx="-xl" />
      </Form>
    </Modal>
  )
})