import { Modal } from '@tidbcloud/uikit'

import { ModalCodeTitle } from 'dbaas/components'
import { PwdSetting } from 'dbaas/features/ClusterManagement/dedicated'
import { useClusterServiceGetCluster } from 'dbaas/services/api-clients/v2023/cluster-management/v1beta1'
import useStores from 'dbaas/stores/useStores'

interface DedicatedPwdSettingModalProps {
  clusterId: string
  clusterName: string
  opened: boolean
  onClose: () => void
}

export const DedicatedPwdSettingModal = ({
  clusterId,
  clusterName,
  opened,
  onClose
}: DedicatedPwdSettingModalProps) => {
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()
  const clusterQuery = useClusterServiceGetCluster(
    clusterId,
    {
      orgId,
      projectId
    },
    {
      query: {
        enabled: !!(opened && clusterId && orgId && projectId),
        select: (data) => data?.dedicatedCluster,
        refetchOnWindowFocus: false,
        refetchOnMount: false
      }
    }
  )
  const isEdit = clusterQuery.data?.annotations?.['tidb.cloud/has-set-password'] === 'true'

  return (
    <Modal
      data-testid="password-setting-modal"
      size="lg"
      centered
      opened={opened}
      closeOnClickOutside={false}
      title={
        <>
          Set Root Password for <ModalCodeTitle maxWidth={320}>{clusterName}</ModalCodeTitle>
        </>
      }
      onClose={onClose}
      styles={{
        body: { padding: 0 }
      }}
    >
      <PwdSetting
        clusterId={clusterId}
        loading={clusterQuery.isLoading}
        isEditMode={isEdit}
        onDone={onClose}
        onCancel={onClose}
      />
    </Modal>
  )
}