council

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!isOn || e.props.hasSurvey) return next(e)
    const now = await read($, phase)
    if ((await $.store.get('band')) === 'hide' && !debating) return next(e)
    const { Box, Text, Button, Select } = $.ui.resolve(e) as any
    const mode = await modeOf($)
    const asking = await read($, isAsking)
    const options = (['off', 'accept', 'auto', 'always'] as Mode[]).map(m => ({ value: m, label: t().reviewOption(t().mode[m]) }))
    const tip = (_id: string, el: any) => el
    const helpOpen = await read($, help)
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1}>
          <Text dimColor>{t().council}</Text>
          {Select && tip('mode',
            <Select key="mode" options={options} value={mode === 'deep' ? 'auto' : mode}
              onSelect={(v: string) => { void $.store.set('mode', v).then(() => showMode($)) }} />,
          )}
          {tip('ask',
            <Button key="debate" variant={asking ? 'primary' : 'secondary'}
              label={debating ? t().debateRunning : asking ? t().debateArmed : t().debateBtn}
              onPress={() => { if (!debating) void update($, isAsking, (x: boolean) => !x) }} />,
          )}
          {tip('deep',
            <Button key="deep" label={deepOnce ? t().deepArmed : t().deepBtn}
              variant={deepOnce ? 'primary' : 'secondary'}
              onPress={() => { if (deepOnce) { deepOnce = false; void showMode($) } else void armDeep($) }} />,
          )}
          {(await read($, transcript)) && tip('show',
            <Button key="show" label={t().showBtn} variant="secondary"
              onPress={() => { void $.ui.open({ id: PANE, title: t().paneTitle }) }} />,
          )}
          {now && <Text dimColor>{now}</Text>}
          <Button key="help" label="?" variant={helpOpen ? 'primary' : 'secondary'}
            onPress={() => { void update($, help, (x: boolean) => !x) }} />
          {tip('hide',
            <Button key="hide" label={t().hide} variant="secondary"
              onPress={() => { void $.store.set('band', 'hide').then(() => update($, phase, (x: string | null) => x)).then(() => $.ui.toast(t().hidden)) }} />,
          )}
        </Box>
        {helpOpen && (
          <Box key="helptext" flexDirection="column">
            {[...t().hint.mode.split(' · '), t().hint.ask, t().hint.deep, t().hint.show, t().hint.hide].map((line, i) =>
              <Text key={`h-${i}`} dimColor>{line}</Text>)}
          </Box>
        )}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Markdown } = $.ui.resolve(e) as any
    const text = await read($, transcript)
    return (
      <Box flexDirection="column">
        {Markdown ? <Markdown key="debate" text={text || t().noDebate} /> : <Text>{text || t().noDebate}</Text>}
      </Box>
    )
  })