import React, { useState } from 'react'

import { Modal } from 'antd'

import { ClusterCluster, OrgOrganization } from '@clinic/client'
import { GitOPSModalBody } from '~/components/GitOPSModalBody'
import { clusterDetailTelemetry } from '~/telemetry'

import { DetailItemCard } from '../components/DetailItemCard'

interface GitOPSModalProps {
  org: OrgOrganization
  cluster: ClusterCluster
  disabled?: boolean
}

export const GitOPSModal: React.FC<GitOPSModalProps> = ({
  org = {},
  cluster = {},
  disabled = false
}) => {
  const name = 'GitOPS'
  const [showModal, setShowModal] = useState(false)

  return (
    <>
      <DetailItemCard
        name={name}
        onClick={() => {
          clusterDetailTelemetry.clickDetailItem(name)
          setShowModal(true)
        }}
        disabled={disabled}
      />

      <Modal
        visible={showModal}
        title={name}
        onCancel={() => setShowModal(false)}
        footer={null}
        destroyOnClose={true}
      >
        <GitOPSModalBody
          orgId={org.externalID!}
          orgName={org.name!}
          clusterId={cluster.id!}
        />
      </Modal>
    </>
  )
}