import { Box, Text } from 'ink'

import { compactPreview } from '../lib/text.js'
import type { Theme } from '../theme.js'

export const QUEUE_WINDOW = 3

export function getQueueWindow(queueLen: number, queueEditIdx: number | null) {
  const start =
    queueEditIdx === null ? 0 : Math.max(0, Math.min(queueEditIdx - 1, Math.max(0, queueLen - QUEUE_WINDOW)))

  const end = Math.min(queueLen, start + QUEUE_WINDOW)

  return { end, showLead: start > 0, showTail: end < queueLen, start }
}

export function estimateQueuedRows(queueLen: number, queueEditIdx: number | null): number {
  if (!queueLen) {
    return 0
  }

  const win = getQueueWindow(queueLen, queueEditIdx)

  return 1 + (win.showLead ? 1 : 0) + (win.end - win.start) + (win.showTail ? 1 : 0)
}

export function QueuedMessages({
  cols,
  queueEditIdx,
  queued,
  t
}: {
  cols: number
  queueEditIdx: number | null
  queued: string[]
  t: Theme
}) {
  if (!queued.length) {
    return null
  }

  const q = getQueueWindow(queued.length, queueEditIdx)

  return (
    <Box flexDirection="column">
      <Text color={t.color.dim} dimColor>
        queued ({queued.length}){queueEditIdx !== null ? ` · editing ${queueEditIdx + 1}` : ''}
      </Text>
      {q.showLead && (
        <Text color={t.color.dim} dimColor>
          {' '}
          …
        </Text>
      )}
      {queued.slice(q.start, q.end).map((item, i) => {
        const idx = q.start + i
        const active = queueEditIdx === idx

        return (
          <Text color={active ? t.color.amber : t.color.dim} dimColor key={`${idx}-${item.slice(0, 16)}`}>
            {active ? '▸' : ' '} {idx + 1}. {compactPreview(item, Math.max(16, cols - 10))}
          </Text>
        )
      })}
      {q.showTail && (
        <Text color={t.color.dim} dimColor>
          {'  '}…and {queued.length - q.end} more
        </Text>
      )}
    </Box>
  )
}