import { useState } from 'react'
import { useFormData } from '../FormContext'

export default function Bemerkungen({ onNext, isCompleted }) {

    const { formData, updateFormData } = useFormData()
    const [wert, setWert] = useState(formData.bemerkungen || '')


    const handleOK = () => {
        updateFormData('bemerkungen', wert)
        onNext()
    }

    const handleKeyDown = (e) => {
        // Ctrl+Enter oder Cmd+Enter zum Speichern
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            handleOK()
        }
    }

    return (
        <section id="bemerkungen">
            <h3>Bemerkungen (optional):</h3>
            <div className="bemerkdiv">
                <textarea 
                    className="beminfeld" 
                    value={wert}
                    onChange={(e) => setWert(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder="Hier können Sie optionale Bemerkungen zur Führung eingeben..."
                    disabled={isCompleted}
                />
                <button 
                    className="okbutton" 
                    onClick={handleOK}
                    disabled={isCompleted}
                >
                    OK
                </button>
            </div>
        </section>
    )
}
