import { Box, Text } from 'ink'
import { useEffect, useState } from 'react'

import { FACES, SPINNER, TOOL_VERBS, VERBS } from '../constants.js'
import { pick } from '../lib/text.js'
import type { Theme } from '../theme.js'
import type { ActiveTool } from '../types.js'

export function Thinking({
  reasoning,
  t,
  thinking,
  tools
}: {
  reasoning: string
  t: Theme
  thinking?: string
  tools: ActiveTool[]
}) {
  const [frame, setFrame] = useState(0)
  const [verb] = useState(() => pick(VERBS))
  const [face] = useState(() => pick(FACES))

  useEffect(() => {
    const id = setInterval(() => setFrame(f => (f + 1) % SPINNER.length), 80)

    return () => clearInterval(id)
  }, [])

  return (
    <Box flexDirection="column">
      {tools.length ? (
        tools.map(tool => (
          <Text color={t.color.dim} key={tool.id}>
            {SPINNER[frame]} {TOOL_VERBS[tool.name] ?? '⚡ ' + tool.name}…
          </Text>
        ))
      ) : (
        <Text color={t.color.dim}>
          {SPINNER[frame]} {face} {verb}…
        </Text>
      )}
      {(reasoning || thinking) && (
        <Text color={t.color.dim} dimColor wrap="truncate-end">
          {'  💭 '}
          {(reasoning || thinking || '').slice(-120).replace(/\n/g, ' ')}
        </Text>
      )}
    </Box>
  )
}