import * as React from 'react'
import { Box, Text, stringWidth } from '@anthropic/ink'
import TextInput from '../TextInput.js'

type Props = {
  value: string
  onChange: (value: string) => void
  historyFailedMatch: boolean
}

function HistorySearchInput({
  value,
  onChange,
  historyFailedMatch,
}: Props): React.ReactNode {
  return (
    <Box gap={1}>
      <Text dimColor>
        {historyFailedMatch ? 'no matching prompt:' : 'search prompts:'}
      </Text>
      <TextInput
        value={value}
        onChange={onChange}
        // Force cursor to end of search input since navigation should cancel search
        cursorOffset={value.length}
        onChangeCursorOffset={() => {}}
        columns={stringWidth(value) + 1}
        focus={true}
        showCursor={true}
        multiline={false}
        dimColor={true}
      />
    </Box>
  )
}

export default HistorySearchInput