import { KvPanel, SectionCard, StaleBadge } from '@overdeck/deck-ui'
import { adapterIdForPanel } from '../../lib/collector-client'
import type { AdapterStatus, Panel } from '../../lib/collector-types'
import { hostGatesKvRows } from '../../lib/overview-mappers'
import type { PrometheusHostPanelData } from '../../lib/panel-data'
import { OVERVIEW_FILL_BODY_CLASS, OVERVIEW_FILL_CARD_CLASS } from './overview-layout'

export interface HostsGatesCardProps {
  panels: Panel[]
  adapters: AdapterStatus[]
}

export function HostsGatesCard({ panels, adapters }: HostsGatesCardProps) {
  const panel = panels.find((p) => p.id.startsWith('host:'))
  const rows = panel ? hostGatesKvRows(panel.data as PrometheusHostPanelData) : []
  const status = panel ? adapters.find((a) => a.id === adapterIdForPanel(panel.id)) : undefined

  return (
    <SectionCard
      title="Hosts & Gates"
      titleBadge={status ? <StaleBadge status={status} /> : undefined}
      className={OVERVIEW_FILL_CARD_CLASS}
    >
      <div className={OVERVIEW_FILL_BODY_CLASS}>
        <KvPanel rows={rows} />
      </div>
    </SectionCard>
  )
}