import { KvPanel, SectionCard, StaleBadge } from '@overdeck/deck-ui'
import { adapterIdForPanel } from '../../lib/collector-client'
import { gatesKvRows } from '../../lib/page-mappers'
import type { GatesPanelData } from '../../lib/panel-data'
import { useCollectorState } from '../../lib/collector-queries'
import { CollectorQueryBoundary } from '../shared/CollectorQueryBoundary'

export function GatesContent() {
  const stateQuery = useCollectorState()
  return (
    <CollectorQueryBoundary query={stateQuery}>
      {(state) => {
        const gatesPanel = state.panels.find((panel) => panel.id === 'gates')
        const gatesData = gatesPanel?.data as GatesPanelData | undefined
        const status = state.adapters.find((adapter) => adapter.id === adapterIdForPanel('gates'))

        if (!gatesData) return <div className="text-fg-muted">No gates panel in collector state.</div>

        return (
          <SectionCard title="Gates" titleBadge={status ? <StaleBadge status={status} /> : undefined}>
            <KvPanel rows={gatesKvRows(gatesData)} />
          </SectionCard>
        )
      }}
    </CollectorQueryBoundary>
  )
}