import { BotsCard } from './BotsCard'
import { CiCard } from './CiCard'
import { ForensicsSection } from './ForensicsSection'
import { HostsGatesCard } from './HostsGatesCard'
import { LimitsCard } from './LimitsCard'
import { MorningDigestBanner } from './MorningDigestBanner'
import { NeedsYouNowCard } from './NeedsYouNowCard'
import { PlansCard } from './PlansCard'
import { ScoreboardRow } from './ScoreboardRow'
import { OVERVIEW_PAIR_GRID_CLASS, OVERVIEW_WIDGET_GRID_CLASS } from './overview-layout'
import { useCollectorItems, useCollectorState } from '../../lib/collector-queries'
import { CollectorQueryBoundary } from '../shared/CollectorQueryBoundary'

/** Assembles every mockup-v2 Overview widget group from the collector's `/state` + `/items`. */
export function OverviewContent() {
  const stateQuery = useCollectorState()
  const itemsQuery = useCollectorItems()
  return (
    <CollectorQueryBoundary query={stateQuery}>
      {(state) => (
        <CollectorQueryBoundary query={itemsQuery}>
          {(itemsResponse) => (
            <>
              <MorningDigestBanner />
              <ScoreboardRow panels={state.panels} adapters={state.adapters} />
              <div className={OVERVIEW_PAIR_GRID_CLASS}>
                <NeedsYouNowCard items={itemsResponse.items} />
                <LimitsCard panels={state.panels} adapters={state.adapters} />
              </div>
              <ForensicsSection panels={state.panels} adapters={state.adapters} />
              <div className={OVERVIEW_WIDGET_GRID_CLASS}>
                <BotsCard panels={state.panels} adapters={state.adapters} />
                <CiCard panels={state.panels} adapters={state.adapters} />
                <PlansCard panels={state.panels} adapters={state.adapters} />
                <HostsGatesCard panels={state.panels} adapters={state.adapters} />
              </div>
            </>
          )}
        </CollectorQueryBoundary>
      )}
    </CollectorQueryBoundary>
  )
}