import { useState, type JSX } from 'react'
import { useRequests } from '../../lib/collector-queries'
import type { RequestRow } from '../../lib/request-types'
import { CollectorQueryBoundary } from '../shared/CollectorQueryBoundary'
import { RequestsBoard } from './RequestsBoard'
import { RequestDrawer } from './RequestDrawer'

export function RequestsContent(): JSX.Element {
  const query = useRequests()
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [answeredRows, setAnsweredRows] = useState<Record<string, RequestRow>>({})
  return (
    <CollectorQueryBoundary query={query}>
      {({ requests }) => {
        const visibleRequests = requests.map((request) => request.state === 'blocked_needs_owner' ? (answeredRows[request.id] ?? request) : request)
        const selected = selectedId === null ? null : visibleRequests.find((request) => request.id === selectedId) ?? null
        return (
          <>
            <RequestsBoard requests={visibleRequests} onSelect={setSelectedId} selectedId={selectedId} />
            {selected ? (
              <RequestDrawer
                request={selected}
                onClose={() => setSelectedId(null)}
                onAnswered={(row) => {
                  setAnsweredRows((current) => ({ ...current, [row.id]: row }))
                  setSelectedId(null)
                }}
              />
            ) : null}
          </>
        )
      }}
    </CollectorQueryBoundary>
  )
}