import { TextInput } from '@mantine/core'
import { useEffect, useState } from 'react'

import type { BaseEditorProps } from './types'

export function TextEditor({ autoFocus = true, onCancel, onCommit, onMoveNext, onMovePrev, value }: BaseEditorProps<string>) {
  const [inputValue, setInputValue] = useState(value ?? '')

  useEffect(() => {
    setInputValue(value ?? '')
  }, [value])

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault()
      onCommit(inputValue)
    } else if (e.key === 'Escape') {
      e.preventDefault()
      onCancel()
    } else if (e.key === 'Tab') {
      e.preventDefault()
      onCommit(inputValue)
      if (e.shiftKey) {
        onMovePrev?.()
      } else {
        onMoveNext?.()
      }
    }
  }

  return (
    <TextInput
      autoFocus={autoFocus}
      onChange={(e) => setInputValue(e.currentTarget.value)}
      onKeyDown={handleKeyDown}
      size="xs"
      value={inputValue}
    />
  )
}