parking-lot

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const text = await read($, listing)
    const all = shownRows(text, await read($, checked))
    const shown = all.filter(row => !('id' in row) || !isWaiting(row))
    const isEmpty = all.some(row => 'id' in row) ? !shown.some(row => 'id' in row) : text === NOTHING
    if (e.props.hasSurvey || text === '' || isEmpty) return next(e)
    const open = await read($, expanded)
    const ui = $.ui.resolve(e)
    const { Box, Button, Text } = ui
    const width = idWidth(shown)
    const toggle = (id: string) =>
      update($, expanded, ids => (ids.includes(id) ? ids.filter(one => one !== id) : [...ids, id]))

    return card(
      ui,
      e.surface === 'desktop',
      shown.map(row => {
        if ('text' in row) return <Text dimColor>{row.text}</Text>
        if (e.surface === 'desktop') return desktopRow(ui, row)
        const isOpen = open.includes(row.id)
        const label = whenLabel(row.when)
        const room = e.props.bodyColumns - `││ ▢${idLabel(row, width)}${label}${row.origin}  ▸`.length - 1
        const isCut = row.body.length > room
        const body = isOpen || !isCut ? row.body : `${row.body.slice(0, Math.max(0, room - 1))}…`
        return (
          <Box flexDirection="column">
            <Box flexDirection="row">
              {checkbox(ui, row, () => toggleChecked($, row))}
              <Text dimColor>{idLabel(row, width)}</Text>
              {label !== '' && <Text bold>{label}</Text>}
              {row.origin !== '' && <Text dimColor>{row.origin}  </Text>}
              <Box flexGrow={1}>
                <Text wrap={isOpen ? 'wrap' : 'truncate-end'} {...bodyStyle(row)}>
                  {body}
                </Text>
              </Box>
              {(isCut || row.reason !== '') && (
                <Button key={`item-${row.id}`} plain dimColor onPress={() => toggle(row.id)}>
                  {isOpen ? ' ▾' : ' ▸'}
                </Button>
              )}
            </Box>
            {isOpen && row.reason !== '' && <Text dimColor>{`  possibly handled: ${row.reason}`}</Text>}
          </Box>
        )
      }),
    )
  })

function card(ui: Ui, isDesktop: boolean, children: RenderChildren) {
  const { Box, Text } = ui
  return (
    <Box
      flexDirection="column"
      borderStyle="round"
      borderColor="inactive"
      paddingX={isDesktop ? 2 : 1}
      paddingY={isDesktop ? 1 : 0}
    >
      <Text bold>Parking lot</Text>
      <Text dimColor>Check an item off to mark it done.</Text>
      {children}
    </Box>
  )
}

function desktopRow(ui: Ui, item: Item) {
  if (!('Client' in ui)) return null
  const { Box, Client } = ui
  return (
    <Box marginTop={1}>
      <Client
        key={item.key ?? item.id}
        module="./row.tsx"
        width="100%"
        props={{
          id: item.handled === undefined ? item.id : '',
          label: whenLabel(item.when),
          origin: item.origin,
          body: item.body,
          reason: item.reason,
          isChecked: isChecked(item),
          isMaybe: item.isMaybe,
        }}
      />
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text } = ui

    const all = shownRows(await read($, listing), await read($, checked))
    const width = idWidth(all)

    return card(
      ui,
      e.surface === 'desktop',
      all.map(row => {
        if ('text' in row) return <Text dimColor>{row.text}</Text>
        if (e.surface === 'desktop') return desktopRow(ui, row)
        return (
          <Box flexDirection="column">
            <Box flexDirection="row">
              {checkbox(ui, row, () => toggleChecked($, row))}
              <Text dimColor>{idLabel(row, width)}</Text>
              <Box flexGrow={1}>
                <Text {...bodyStyle(row)}>
                  {whenLabel(row.when)}
                  {row.origin !== '' && `${row.origin}  `}
                  {row.body}
                </Text>
              </Box>
            </Box>
            {row.reason !== '' && <Text dimColor>{`  possibly handled: ${row.reason}`}</Text>}
          </Box>
        )
      }),
    )
  })