import { useCallback, type ReactElement } from 'react'
import { useBridge, useData, type PanelRef } from '@jaspers-ai/sdk'
import { Calendar } from './Calendar'
import { CallPage } from './Call'
import { readState, stored, type CallsState } from './calls'
import './styles.css'

// Earnings calls in one panel: a company's call when the state names a ticker, the calendar of a day
// when it does not. One view rather than two, because a row of the calendar opens its call here and a
// view cannot place another. The state is read whole and written whole, so opening another company
// leaves no quarter of the last one behind.

export function CallsView({ panel }: { panel: PanelRef }): ReactElement {
  const bridge = useBridge()
  const raw = useData(`workspaces/${panel.workspaceId}/panels/${panel.id}/state`)
  const write = useCallback(
    (next: CallsState) => void bridge.setState({ id: panel.id, workspaceId: panel.workspaceId }, [], stored(next)),
    [bridge, panel.id, panel.workspaceId],
  )
  // The state arrives a round trip after the frame mounts; nothing runs until it is here.
  if (raw === undefined) {
    return (
      <div className="ec-root">
        <div className="ec-bar">
          <span className="ec-muted">Loading…</span>
        </div>
      </div>
    )
  }
  const state = readState(raw)
  return state.symbol ? <CallPage panel={panel} state={state} write={write} /> : <Calendar panel={panel} state={state} write={write} />
}