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

export default function BesucherBar({ title, euro, onNext, isCompleted }) {

    const { formData, updateFormData } = useFormData()

    // Bestimme das Feld basierend auf dem Titel
    const fieldName = title.includes('Barspende') ? 'barspende' : 'besucherAnzahl'

        // DEBUG: Zeige formData beim Laden
    console.log('🔍 BesucherBar geladen:', title)
    console.log('📊 Aktuelles formData:', formData)
    console.log('🔑 Verwende Feld:', fieldName)
    console.log('💾 Gespeicherter Wert:', formData[fieldName])
    


    const [wert, setWert] = useState(formData[fieldName] || '')

        // DEBUG: Zeige State-Änderungen
    useEffect(() => {
        console.log('✏️ Wert geändert für', fieldName, ':', wert)
    }, [wert, fieldName])


    const handleOK = () => {
        if (wert) {
            updateFormData(fieldName, wert)

                        console.log('✅ Gespeichert! Neues formData:', formData)


            onNext()
        } else {
            alert('Bitte einen Wert eingeben')
        }
    }

    return (
        <section id="besucherbar">
            <h3>{title}:</h3>
            <div className="besadiv">
                <input type='number' value={wert} onChange={(e) => setWert(e.target.value)}
                    placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled={isCompleted}
                />
                &nbsp;&nbsp;{euro}
                <button className="okbutton" onClick={handleOK} disabled={!wert}>OK</button>
            </div>
        </section>
    )
}