usage-band

  on('ui.render', { component: 'Pane', requestId: SETTINGS_PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const mark = (isOn: boolean) => (isOn ? '[x]' : '[ ]')
    const refreshNext = nextOf(REFRESH_CHOICES, settings.refreshSeconds)
    const warnNext = nextOf(WARN_CHOICES, settings.warnAt)
    const hotNext = nextOf(HOT_CHOICES, settings.hotAt)
    const layoutNext = nextOf(LAYOUTS, settings.layout)

    return (
      <Box flexDirection="column">
        <Text bold>Pills</Text>
        {TOGGLES.map(one => (
          <Button
            key={one.field}
            plain
            label={`${mark(settings[one.field])} ${one.title}`}
            onPress={() => setOption($, one.field, !settings[one.field])}
          />
        ))}
        <Text bold>Options</Text>
        {SWITCHES.map(one => (
          <Button
            key={one.field}
            plain
            label={`${mark(settings[one.field])} ${one.title}`}
            onPress={() => setOption($, one.field, !settings[one.field])}
          />
        ))}
        <Button
          key="layout"
          plain
          label={`Layout: ${settings.layout} (press for ${layoutNext})`}
          onPress={() => setOption($, 'layout', layoutNext)}
        />
        <Button
          key="warnAt"
          plain
          label={`Yellow from ${settings.warnAt}% (press for ${warnNext}%)`}
          onPress={() => setOption($, 'warnAt', warnNext)}
        />
        <Button
          key="hotAt"
          plain
          label={`Red from ${settings.hotAt}% (press for ${hotNext}%)`}
          onPress={() => setOption($, 'hotAt', hotNext)}
        />
        <Button
          key="refreshSeconds"
          plain
          label={`Refresh every ${settings.refreshSeconds}s (press for ${refreshNext}s)`}
          onPress={() => setOption($, 'refreshSeconds', refreshNext)}
        />
        <Text dimColor>Each change is saved to your settings and reloads the band.</Text>
        <Button key="close" role="dismiss" label="Close" onPress={() => $.ui.close({ id: SETTINGS_PANE })} />
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, isHidden))) {
      return next(e)
    }
    if (e.surface === 'terminal' && !settings.showInTerminal) {
      return next(e)
    }
    const groups = await currentPills($)
    if (groups.length === 0) {
      return next(e)
    }
    const look = lookOf(settings)

    if (e.surface === 'terminal') {
      const { Box, Text } = $.ui.resolve(e)
      const pill = (one: Pill) => {
        const color = TERMINAL_COLORS[one.kind]
        if (isBar(one)) {
          const level = TERMINAL_BAR[barLevel(one.percent, look)]
          const { cells, mark } = terminalBar(one.percent, one.elapsed)

          return (
            <Box key={one.key} flexDirection="row">
              <Text color={color}>
                {look.isCompact ? '' : `${TERMINAL_ICONS[one.kind]} `}
                {one.label}{' '}
              </Text>
              {!look.isCompact &&
                cells.map((cell, i) =>
                  i === mark ? (
                    <Text key={`c${i}`} bold>
                      │
                    </Text>
                  ) : (
                    <Text key={`c${i}`} color={cell === '█' ? level : undefined} dimColor={cell !== '█'}>
                      {cell}
                    </Text>
                  ),
                )}
              <Text color={look.isCompact ? level : color} bold>
                {look.isCompact ? '' : ' '}
                {formatPercent(one.percent)}
              </Text>
              {one.isAtRisk && (
                <Text color={TERMINAL_BAR.high} bold>
                  {' '}!
                </Text>
              )}
              {one.remaining !== null && (
                <Text dimColor>
                  {' · '}
                  {look.isCompact ? '' : '⏱ '}
                  {one.remaining}
                </Text>
              )}
            </Box>
          )
        }

        return (
          <Box key={one.key} flexDirection="row">
            {!look.isCompact && <Text color={color}>{TERMINAL_ICONS[one.kind]} </Text>}
            <Text color={color} bold>
              {look.isCompact ? compactText(one) : one.value}
            </Text>
          </Box>
        )
      }

      return (
        <Box flexDirection="row" flexWrap="wrap" columnGap={3}>
          {groups.map((group, i) => (
            <Box key={`g${i}`} flexDirection="row" flexWrap="wrap" columnGap={2}>
              {group.map(pill)}
            </Box>
          ))}
        </Box>
      )
    }

    const { Box, Svg } = $.ui.resolve(e)

    return (
      <Box flexDirection="row" flexWrap="wrap" columnGap={2} rowGap={1}>
        {groups.map((group, i) => (
          <Box key={`g${i}`} flexDirection="row" flexWrap="wrap" columnGap={1} rowGap={1}>
            {group.map(one => {
              const drawing = pillSvg(one, look)

              return (
                <Svg
                  key={drawing.key}
                  source={drawing.svg}
                  alt={drawing.alt}
                  width={drawing.width}
                  height={24}
                  isInteractive
                />
              )
            })}
          </Box>
        ))}
      </Box>
    )
  })