sc-toolbox

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = surfaceTable($.ui.resolve(e), e.surface)
    const { Box } = ui
    const bodyColumns = e.props.bodyColumns ?? 60
    const header = {
      brand: paneTitle(MOD_NAME),
      ...releaseHeader(release, m.release, m.updateRequired),
      isUnderTabs: isBesideOtherPanes('sc-toolbox', {
      'sc-accounts': (await $.state.get({ plugin: 'sc-accounts', key: 'paneOpen' })).value === true,
      'sc-workspace': (await $.state.get({ plugin: 'sc-workspace', key: 'paneOpen' })).value === true,
      'sc-toolbox': (await $.state.get({ plugin: 'sc-toolbox', key: 'paneOpen' })).value === true,
    }),
      columns: bodyColumns,
      exit: { label: `✕ ${m.closeButton}`, onPress: () => void closePane($).catch((error: unknown) => $.ui.toast(message(error))) },
      backLabel: m.backButton,
    }
    const hasField = e.surface !== 'mobile'
    const act = (work: () => Promise<string | void>) => () => {
      void work()
        .then(text => text && $.ui.toast(text))
        .catch((error: unknown) => $.ui.toast(message(error)))
    }
    const dismiss = async () => {
      await update($, dialog, () => null)
      await update($, suggest, () => null)
      await update($, focused, () => null)
      // Back from a dialog, the quick view takes its own height again.
      if (quick) await $.ui.open({ id: PANE, title: TAB_LABEL, rows: quickRows((await read($, tools)).length) })
    }
    const openDialog = async (next: Asked, values: Record<string, string> = {}) => {
      await update($, draft, () => values)
      await update($, suggest, () => null)
      await update($, dialog, () => next)
      await $.ui.open({ id: PANE, title: TAB_LABEL, rows: SETTINGS_ROWS, focus: true, closeOnEscape: true })
    }
    const list = await read($, tools)
    const byId = (id: string) => list.find(tool => tool.id === id)
    // Running a tool: one that asks for values asks first, one already running asks to restart.
    const start = async (tool: Tool) => {
      if (tool.kind === 'shell' && running.has(tool.id)) return openDialog({ kind: 'restart', id: tool.id })
      const values = startingValues(tool, (await rememberedValues($))[tool.id] ?? {})
      // The values dialog is itself the question; a tool with none asks to confirm when set to.
      if (askedParams(tool).length > 0) return openDialog({ kind: 'ask', id: tool.id }, values)
      if (tool.confirm) return openDialog({ kind: 'confirm', id: tool.id }, values)

      return runTool($, tool, values)
    }
    const asked = await read($, dialog)
    const values = await read($, draft)
    // Settles once the value is kept, so Enter in a field submits what was typed.
    const setDraft = (key: string, value: string): Promise<void> =>
      update($, draft, current => ({ ...current, [key]: value }))
        .then(() => undefined)
        .catch((error: unknown) => debug($, error))

    if (asked?.kind === 'ask' && byId(asked.id)) {
      const tool = byId(asked.id) as Tool
      const offered = await read($, suggest)
      const fields: FormField[] = askedParams(tool).map(name => {
        const param = tool.params?.[name]
        const onInput = (value: string): Promise<void> => {
          const kept = setDraft(name, value)
          // A path is offered as it is typed: the folder typed into is listed.
          if (param?.type !== 'path') return kept
          void (async () => {
            const { folder } = splitTyped(value)
            const path = folder === '' ? root : `${root}/${folder}`
            const entries = (await $.fs.exists(path)) ? await $.fs.list(path) : []
            await update($, suggest, () => ({ field: name, items: pathSuggestions(value, entries, { pathKind: param.pathKind, glob: param.glob }) }))
          })().catch((error: unknown) => debug($, error))

          return kept
        }

        return {
          key: name,
          label: name,
          value: values[name] ?? '',
          ...(param?.type === 'choice' && param.choices ? { options: param.choices.map(choice => ({ value: choice, label: choice })) } : {}),
          ...(offered?.field === name ? { suggestions: offered.items } : {}),
          onInput,
          onPick: onInput,
        }
      })

      return FormDialog(
        ui,
        bodyColumns,
        header,
        m.askTitle(tool.name),
        // The command as it will run, filled with what is typed so far.
        [{ text: m.askPreview(fill(tool, { ...startingValues(tool), ...values })), tone: 'muted' }],
        fields,
        {
          submit: {
            label: m.runButton,
            onPress: act(async () => {
              const current = await read($, draft)
              const wrong = valuesProblem(tool, current)
              if (wrong) return m.notChoice(wrong)
              await dismiss()

              return runTool($, tool, current)
            }),
          },
          cancel: { label: m.cancel, onPress: act(dismiss) },
        },
        { hasField, noInput: m.noInput },
        await read($, focused),
      )
    }

    if (asked?.kind === 'log' && byId(asked.id)) {
      const tool = byId(asked.id) as Tool
      // Reading the tick redraws the dialog as output arrives.
      await read($, logTick)
      const run = (await read($, runs))[tool.id]
      const isFollowing = await read($, follow)
      const buffer = buffers.get(tool.id) ?? new LogBuffer()
      const window = buffer.window(LOG_WINDOW_CHARS, isFollowing ? undefined : logLast, LOG_WINDOW_LINES)
      const now = await $.clock.now()
      const tone = run?.state === 'failed' ? 'danger' : run?.state === 'running' ? 'ok' : undefined
      const tile = (key: string, label: string, onPress: () => void): Tile => ({ key, label, onPress })

      return LogDialog(
        ui,
        bodyColumns,
        header,
        m.logTitle(tool.name),
        { text: run ? m.logStatus(runText(run, now, m), run.command) : buffer.lines.length > 0 ? m.logFromFile : m.logNoRun, ...(tone ? { tone } : {}) },
        { text: window.text, firstLine: window.first + 1, empty: m.logEmpty },
        {
          ...(window.first > 0
            ? { older: tile('log-older', m.logOlder, () => void (async () => {
                logLast = window.first
                await update($, follow, () => false)
              })()) }
            : {}),
          ...(!isFollowing && window.last < buffer.lines.length
            ? { newer: tile('log-newer', m.logNewer, () => void (async () => {
                logLast = Math.min(buffer.lines.length, window.last + (window.last - window.first))
                await update($, logTick, n => n + 1)
              })()) }
            : {}),
          follow: { key: 'log-follow', label: isFollowing ? m.logFollowing : m.logFollow, isMain: isFollowing, onPress: () => void update($, follow, isOn => !isOn) },
          ...(run?.state === 'running'
            ? { stop: tile('log-stop', m.stopButton, act(() => stopTool($, tool))) }
            : {
                again: tile('log-again', m.againButton, act(async () => {
                  await dismiss()

                  return start(tool)
                })),
              }),
          close: { key: 'dialog-cancel', label: m.closeButton, isDismiss: true, onPress: act(dismiss) },
        },
        await read($, focused),
      )
    }

export function FormDialog(
  ui: ElementTable,
  bodyColumns: number,
  header: HeaderInfo,
  title: string,
  lines: DialogLine[],
  fields: FormField[],
  actions: { submit: { label: string; onPress: () => void }; cancel: { label: string; onPress: () => void } },
  form: { hasField: boolean; noInput: string },
  focused: string | null = null,
) {
  const { Box, Text } = ui
  const Input = form.hasField && 'Input' in ui ? ui.Input : undefined
  const Select = form.hasField && 'Select' in ui ? ui.Select : undefined

  return DialogFrame(
    ui,
    dialogHeader(header, actions.cancel.onPress),
    theme.accent,
    title,
    <Box key="form-body" flexDirection="column" marginTop={1} gap={1}>
      {lines.map((line, index) => Toned(ui, `form-line-${index}`, line.text, line.tone === 'danger' ? 'danger' : line.tone === 'ok' ? 'ok' : undefined, { isDim: line.tone === 'muted', wrap: 'wrap' }))}
      {!Input && Toned(ui, 'form-no-input', form.noInput, undefined, { isDim: true, wrap: 'wrap' })}
      {Input &&
        fields.map((field, index) => (
          <Box key={`form-field-${field.key}`} flexDirection="column">
            <Text dimColor>{printable(field.label)}</Text>
            {field.options && Select ? (
              <Select
                key={`field-${field.key}`}
                options={field.options.map(option => ({ ...option, label: printable(option.label) }))}
                value={field.value}
                {...(index === 0 ? { autoFocus: true as const } : {})}
                onSelect={value => void field.onInput(value)}
              />
            ) : (
              InputFrame(
                ui,
                `form-frame-${field.key}`,
                true,
                <Input
                  key={`field-${field.key}`}
                  value={printable(field.value)}
                  {...(field.placeholder ? { placeholder: printable(field.placeholder) } : {})}
                  {...(index === 0 ? { autoFocus: true as const } : {})}
                  onInput={value => void field.onInput(value)}
                  // Enter submits once the field's value is kept, so the submit reads what was typed.
                  onSubmit={value => void Promise.resolve(field.onInput(value)).then(actions.submit.onPress, actions.submit.onPress)}
                />,
              )
            )}
            {(field.suggestions ?? []).length > 0 && (
              <Box key={`form-suggest-${field.key}`} flexDirection="column" paddingLeft={2}>
                {(field.suggestions ?? []).map((suggestion, row) =>
                  LinkButton(ui, `suggest-${field.key}-${row}`, suggestion, () => void (field.onPick ?? field.onInput)(suggestion)),
                )}
              </Box>
            )}
          </Box>
        ))}
    </Box>,
    Tiles(
      ui,
      Math.max(20, bodyColumns - CARD_CHROME),
      [
        ...(Input ? [{ key: 'form-submit', label: actions.submit.label, isMain: true, onPress: actions.submit.onPress }] : []),
        { key: 'dialog-cancel', label: actions.cancel.label, isDismiss: true, onPress: actions.cancel.onPress },
      ],
      { focused },
    ),
  )
}

export function DialogFrame(
  ui: ElementTable,
  header: HeaderInfo,
  borderColor: string,
  title: string,
  body: ReturnType<typeof Header>,
  tiles: ReturnType<typeof Tiles>,
) {
  const { Box, Text } = ui

  return (
    <Box key="dialog-pane" flexDirection="column">
      {Header(ui, header)}
      <Box key="dialog" flexDirection="column" borderStyle="round" borderColor={borderColor} paddingX={1}>
        <Text bold>{printable(title)}</Text>
        {body}
        {tiles}
      </Box>
    </Box>
  )
}

export function Toned(
  ui: ElementTable,
  key: string,
  text: string,
  tone?: Tone,
  style: { isDim?: boolean; isBold?: boolean; wrap?: 'wrap' | 'truncate-end' } = {},
) {
  const { Text } = ui

  return (
    <Text key={key} color={tone ? theme[tone] : undefined} dimColor={style.isDim === true} bold={style.isBold === true} {...(style.wrap ? { wrap: style.wrap } : {})}>
      {printable(text)}
    </Text>
  )
}

export function InputFrame(ui: ElementTable, key: string, isAccent: boolean, input: unknown, glyph?: string) {
  const { Box, Text } = ui

  return (
    <Box
      key={key}
      borderStyle="round"
      borderColor={isAccent ? theme.accent : 'gray'}
      borderDimColor={!isAccent}
      paddingX={1}
      gap={1}
      flexGrow={1}
    >
      {glyph && <Text color={isAccent ? theme.accent : undefined}>{printable(glyph)}</Text>}
      {input as never}
    </Box>
  )
}

export function LinkButton(ui: ElementTable, key: string, label: string, onPress: () => void, extra: { autoFocus?: boolean } = {}) {
  const { Button } = ui

  return <Button key={key} label={printable(label)} plain hover={{ color: theme.accent, bold: true }} {...(extra.autoFocus ? { autoFocus: true as const } : {})} onPress={onPress} />
}