import { useState } from 'react';

export const MONTEURE = ['Michael', 'Daniel', 'Dietmar', 'Fidelis'];

interface Props {
  value: string;
  onChange: (v: string) => void;
  onCommit?: (v: string) => void;
}

export default function MonteurField({ value, onChange, onCommit }: Props) {
  const [customMode, setCustomMode] = useState(() => value !== '' && !MONTEURE.includes(value));

  function handleSelect(v: string) {
    if (v === '__custom__') {
      setCustomMode(true);
      return;
    }
    setCustomMode(false);
    onChange(v);
    onCommit?.(v);
  }

  return (
    <label className="field">Monteur
      <select value={customMode ? '__custom__' : value} onChange={e => handleSelect(e.target.value)}>
        <option value="">— wählen —</option>
        {MONTEURE.map(m => <option key={m} value={m}>{m}</option>)}
        <option value="__custom__">Andere …</option>
      </select>
      {customMode && (
        <input
          style={{ marginTop: 8 }}
          value={value}
          onChange={e => onChange(e.target.value)}
          onBlur={e => onCommit?.(e.target.value)}
          placeholder="Name eingeben"
        />
      )}
    </label>
  );
}