import { Modal } from '@tidbcloud/uikit'
import { useState } from 'react'

import { ModalCodeTitle } from 'dbaas/components'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'

import { ConnectionModalBody } from './ModalBodyForNodeGroup'
interface ConnectionModalProps {
  cluster: SharedCluster
  opened: boolean
  defaultNodeGroupId?: string
  nodeGroupFixed?: boolean
  onClose: () => void
}

export const ConnectionModal = ({ cluster, opened, onClose, ...nodeGroupProps }: ConnectionModalProps) => {
  const { defaultNodeGroupId, nodeGroupFixed } = nodeGroupProps
  const initialTitle = (
    <>
      Connect to <ModalCodeTitle maxWidth={480}>{cluster.displayName}</ModalCodeTitle>
    </>
  )
  const [customTitle, setCustomTitle] = useState<React.ReactNode>('')
  const resetModalTitle = () => setCustomTitle('')

  const closeModal = () => {
    resetModalTitle()
    onClose()
  }

  return (
    <Modal
      size={720}
      centered
      opened={opened}
      closeOnClickOutside={false}
      title={customTitle || initialTitle}
      onClose={closeModal}
      styles={() => ({
        modal: { flexShrink: 0 },
        body: { padding: 0 }
      })}
      data-testid="dedicated-connection-modal"
    >
      <ConnectionModalBody
        clusterId={cluster.id}
        defaultNodeGroupId={defaultNodeGroupId}
        nodeGroupFixed={nodeGroupFixed}
        onCancel={closeModal}
        titleHandlers={{
          update: setCustomTitle,
          reset: resetModalTitle
        }}
      />
    </Modal>
  )
}