import { Button, Modal } from '@tidbcloud/uikit'
import { IconPlus } from '@tidbcloud/uikit/icons'
import { useMemo, useState } from 'react'

import { CloudconfigClusterType } from 'apiClient/services/devops/interface'
import DefaultTemplateTable from 'pages/ConfigCenter/Template/components/DefaultTemplateTable'

import ModifyTenantDefaultTemplateBinding from './Form/ModifyTenantDefaultTemplateBinding'

export default function TenantDefaultTemplateBinding({
  org_id,
  cluster_type
}: {
  org_id?: string
  cluster_type: CloudconfigClusterType
}) {
  const [openModifyModal, setOpenModifyModal] = useState<boolean>(false)

  const actions = useMemo(
    () => [
      <Button
        key="modify-binding"
        leftSection={<IconPlus size={16} />}
        onClick={() => {
          setOpenModifyModal(true)
        }}
      >
        Modify Binding
      </Button>
    ],
    []
  )

  return (
    <>
      <DefaultTemplateTable
        default_cluster_type={cluster_type}
        default_tenant_id={org_id}
        exact_match={true}
        hidden_filters={['cluster_type', 'tenant_id']}
        tool_bar_extra={actions}
        deletable={true}
      />

      <Modal
        centered
        closeOnClickOutside={false}
        opened={openModifyModal}
        onClose={() => setOpenModifyModal(false)}
        size={800}
        title="Modify Tenant Default Template Binding"
        trapFocus={false}
      >
        {openModifyModal ? (
          <ModifyTenantDefaultTemplateBinding
            org_id={org_id}
            cluster_type={cluster_type}
            onSuccess={() => {
              setOpenModifyModal(false)
            }}
            onCancel={() => setOpenModifyModal(false)}
          />
        ) : null}
      </Modal>
    </>
  )
}