import { useState } from "react";

function TodoForm({ onAddTodo }) {
    const [input, setInput] = useState("");
    const [priority, setPriority] = useState("normal");
    const [validationError, setValidationError] = useState("");

    function handleSubmit(event) {

        event.preventDefault();
        const cleanedInput = input.trim();

        if (cleanedInput === "") {
            setValidationError("Bitte geben Sie eine Aufgabe ein.");
            return;
        }

        onAddTodo(cleanedInput, priority);

        setInput("");
        setPriority("normal");
        setValidationError("");
    }

    return (
        <form className="todo-form" onSubmit={handleSubmit}>

            <div className="form-field">
                <label htmlFor="todo-input">Neue Aufgabe</label>
                <input
                    id="todo-input"
                    type="text"
                    value={input}
                    onChange={(event) => setInput(event.target.value)}
                    placeholder="Zum Beispiel: React-Komponenten wiederholen"
                />
            </div>

            <div className="form-field">
                <label htmlFor="priority">Priorität</label>
                <select
                    id="priority"
                    value={priority}
                    onChange={(event) => setPriority(event.target.value)}
                >
                    <option value="low">Niedrig</option>
                    <option value="normal">Normal</option>
                    <option value="high">Hoch</option>
                </select>
            </div>

            <button className="primary-button" type="submit">
                Aufgabe hinzufügen
            </button>
            {validationError && (
                <p className="validation-error" role="alert">
                    {validationError}
                </p>
            )}
        </form>
    );
}
export default TodoForm;