import React, { useState } from 'react'

import { Modal } from 'antd'

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

import { DetailItemCard } from '../components/DetailItemCard'
import { TimeRange } from '../components/TimeWindowSelect'
import { MetricsModalBody } from './MetricsModal'

interface CloudMetricsModalProps {
  org: OrgOrganization
  cluster: ClusterCluster
  timeRange: TimeRange
  visible: boolean
}

export const CloudMetricsModal: React.FC<CloudMetricsModalProps> = ({
  org = {},
  cluster = {},
  timeRange,
  visible
}) => {
  const name = 'Metrics'
  const [showModal, setShowModal] = useState(false)

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

      <Modal
        visible={showModal}
        title={name}
        onCancel={() => setShowModal(false)}
        footer={null}
      >
        <MetricsModalBody
          oid={org.id!}
          cid={cluster.id!}
          orgName={org.name!}
          timeRange={timeRange}
          cluster={cluster}
          visible={visible}
        />
      </Modal>
    </>
  )
}