import sample from 'lodash-es/sample.js'
import * as React from 'react'
import { useMemo } from 'react'
import { Box, Text } from '@anthropic/ink'
import { extractTag } from '../../utils/messages.js'
import { MessageResponse } from '../MessageResponse.js'

function getSavingMessage(): string {
  return sample(['Got it.', 'Good to know.', 'Noted.'])
}

type Props = {
  addMargin: boolean
  text: string
}

export function UserMemoryInputMessage({
  text,
  addMargin,
}: Props): React.ReactNode {
  const input = extractTag(text, 'user-memory-input')
  const savingText = useMemo(() => getSavingMessage(), [])

  if (!input) {
    return null
  }

  return (
    <Box flexDirection="column" marginTop={addMargin ? 1 : 0} width="100%">
      <Box>
        <Text color="remember" backgroundColor="memoryBackgroundColor">
          #
        </Text>
        <Text backgroundColor="memoryBackgroundColor" color="text">
          {' '}
          {input}{' '}
        </Text>
      </Box>
      <MessageResponse height={1}>
        <Text dimColor>{savingText}</Text>
      </MessageResponse>
    </Box>
  )
}