import { Button } from '../ui'
import { WordInputWithAutocomplete } from './WordInputWithAutocomplete'

export function UnlockAccountForm(params: {
  words: string[]
  onWordChange: (index: number, value: string) => void
  onPaste: () => void
}): React.ReactElement {
  return (
    <div className="mb-4">
      <WordInputsGrid words={params.words} onWordChange={params.onWordChange} />
      <Button
        type="button"
        variant="ghost"
        size="small"
        onClick={params.onPaste}
        className="mt-2 text-sm text-gray-600 hover:text-gray-800 underline"
      >
        Coller depuis le presse-papiers
      </Button>
    </div>
  )
}

function WordInputsGrid(params: { words: string[]; onWordChange: (index: number, value: string) => void }): React.ReactElement {
  return (
    <div className="grid grid-cols-2 gap-4">
      <WordInputSlot index={0} value={params.words[0] ?? ''} onWordChange={params.onWordChange} />
      <WordInputSlot index={1} value={params.words[1] ?? ''} onWordChange={params.onWordChange} />
      <WordInputSlot index={2} value={params.words[2] ?? ''} onWordChange={params.onWordChange} />
      <WordInputSlot index={3} value={params.words[3] ?? ''} onWordChange={params.onWordChange} />
    </div>
  )
}

function WordInputSlot(params: { index: number; value: string; onWordChange: (index: number, value: string) => void }): React.ReactElement {
  const onFocus = (): void => {}
  const onBlur = (): void => {}
  return (
    <WordInputWithAutocomplete
      index={params.index}
      value={params.value}
      onChange={(value) => params.onWordChange(params.index, value)}
      onFocus={onFocus}
      onBlur={onBlur}
    />
  )
}