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

import { ModalCodeTitle } from 'dbaas/components'
import { TidbCloudOpenApinextgenv1beta2Tidb } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

import { PremiumConnectModalBody } from './ConnectModalBody'

interface PremiumConnectModalProps {
  tidb: TidbCloudOpenApinextgenv1beta2Tidb
  opened: boolean
  onClose: () => void
}

export const PremiumConnectModal = ({ tidb, opened, onClose }: PremiumConnectModalProps) => {
  const initialTitle = (
    <>
      Connect to <ModalCodeTitle maxWidth={480}>{tidb?.displayName}</ModalCodeTitle>
    </>
  )
  const [customTitle, setCustomTitle] = useState<React.ReactNode>('')
  const resetModalTitle = () => setCustomTitle('')

  return (
    <Modal
      size={720}
      centered
      closeOnClickOutside={false}
      autoFocus={false}
      opened={opened}
      title={customTitle || initialTitle}
      onClose={onClose}
      onExitTransitionEnd={resetModalTitle}
      styles={() => ({
        modal: { flexShrink: 0 },
        body: { padding: 0 }
      })}
      data-testid="premium-connect-modal"
    >
      <PremiumConnectModalBody
        tidbId={tidb?.tidbId || ''}
        onCancel={onClose}
        titleHandlers={{
          update: setCustomTitle,
          reset: resetModalTitle
        }}
      />
    </Modal>
  )
}