🖱️ Bài 17: Event Handling & Forms

function EventDemo() {
    // Click event
    const handleClick = (e) => {
        e.preventDefault(); // Ngăn default behavior
        console.log('Clicked!', e.target);
    };

    // Truyền argument
    const handleDelete = (id) => {
        console.log('Delete:', id);
    };

    return (
        <div>
            <button onClick={handleClick}>Click me</button>
            <button onClick={() => handleDelete(42)}>Delete #42</button>
            <input
                onChange={(e) => console.log(e.target.value)}
                onFocus={() => console.log('focused')}
                onBlur={() => console.log('blurred')}
                onKeyDown={(e) => e.key === 'Enter' && handleClick(e)}
            />
        </div>
    );
}

function ContactForm() {
    const [form, setForm] = useState({ name: '', email: '', message: '' });
    const [errors, setErrors] = useState({});

    const handleChange = (e) => {
        const { name, value } = e.target;
        setForm(prev => ({ ...prev, [name]: value }));
        // Clear error khi user sửa
        if (errors[name]) setErrors(prev => ({ ...prev, [name]: '' }));
    };

    const validate = () => {
        const newErrors = {};
        if (!form.name.trim()) newErrors.name = 'Tên không được trống';
        if (!form.email.includes('@')) newErrors.email = 'Email không hợp lệ';
        if (form.message.length < 10) newErrors.message = 'Tối thiểu 10 ký tự';
        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        if (validate()) {
            console.log('Submit:', form);
            setForm({ name: '', email: '', message: '' });
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <input name="name" value={form.name} onChange={handleChange} placeholder="Tên" />
                {errors.name && <span style={{color:'red'}}>{errors.name}</span>}
            </div>
            <div>
                <input name="email" value={form.email} onChange={handleChange} placeholder="Email" />
                {errors.email && <span style={{color:'red'}}>{errors.email}</span>}
            </div>
            <div>
                <textarea name="message" value={form.message} onChange={handleChange} placeholder="Tin nhắn" />
                {errors.message && <span style={{color:'red'}}>{errors.message}</span>}
            </div>
            <button type="submit">Gửi</button>
        </form>
    );
}