import { Modal } from '@tidbcloud/uikit'
import { useMemoizedFn } from 'ahooks'

import { ModalCodeTitle } from 'dbaas/components'

import { ScopeTypeConst, ScopeTypes } from '../../UserAccess/helpers'
import { APIKeyItem } from '../helpers'

import { EditForm, ProjectEditForm } from './EditForm'

interface EditModalProps {
  onFinish?: () => unknown
  data: APIKeyItem
  visible: boolean
  onClose: () => void
  type: ScopeTypes
  disabled?: boolean
}

export const EditModal: React.FC<React.PropsWithChildren<EditModalProps>> = ({
  onFinish,
  data,
  visible,
  onClose,
  type,
  disabled
}) => {
  const onUpdate = useMemoizedFn(() => {
    onFinish?.()
    onClose()
  })

  return (
    <Modal
      title={
        <>
          Edit API Key <ModalCodeTitle>{data.public_key}</ModalCodeTitle>
        </>
      }
      centered
      size="lg"
      opened={visible}
      onClose={onClose}
    >
      {type === ScopeTypeConst.Org ? (
        <EditForm onFinish={onUpdate} onCancel={onClose} data={data} disabled={disabled} />
      ) : (
        <ProjectEditForm onFinish={onUpdate} onCancel={onClose} data={data} />
      )}
    </Modal>
  )
}