import {FormEvent, useState} from "react"
import "../style/form.css"
// @ts-ignore
import { useNavigate } from "react-router-dom"
import {useAppFetcher} from "../App.tsx";
import {Failure} from "../app/Failure.ts";
export default function CreateTeamPage() {

    const [errors, setErrors] = useState<Failure[]>([])
    const fetcher = useAppFetcher()
    const navigate = useNavigate()

    async function handleSubmit(e : FormEvent){
        e.preventDefault()

        const { name, firstColor,secondColor,picture } = Object.fromEntries(
            new FormData(e.target as HTMLFormElement),
        )

         const response = await fetcher.fetchAPI(
             "teams",
             {name,firstColor: firstColor.toString().toUpperCase(),secondColor: secondColor.toString().toUpperCase(),picture},
             "POST"
         )

        if(response.ok){
            const {id} = await response.json()
            navigate("/team/"+id)
            return
        }

        try {
            const failures = await response.json()
            setErrors(
                Object.entries<string[]>(failures).map(([type, messages]) => ({
                    type,
                    messages,
                })),
            )
        } catch (e) {
            setErrors([
                {
                    type: "internal error",
                    messages: ["an internal error occurred."],
                },
            ])
        }

    }

    return (
        <div className="container">
            <h2>Créer une équipe</h2>

            {errors.map(({ type, messages }) =>
                messages.map((message) => (
                    <p key={type} style={{ color: "red" }}>
                        {type} : {message}
                    </p>
                )),
            )}

            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label htmlFor="name">Nom de l'équipe :</label>
                    <input
                        className="text-input"
                        type="text"
                        id="name"
                        name="name"
                        required
                    />
                    <label htmlFor="picture">Logo :</label>
                    <input
                        className="text-input"
                        type="text"
                        id="picture"
                        name="picture"
                        required
                    />
                    <label htmlFor="firstColor">Couleur principale :</label>
                    <input
                        className="color-input"
                        type="color"
                        id="firstColor"
                        name="firstColor"
                        defaultValue="#ffffff"
                        required
                    />
                    <label htmlFor="secondColor">Couleur secondaire :</label>
                    <input
                        className="color-input"
                        type="color"
                        id="secondColor"
                        name="secondColor"
                        required
                    />
                    <div id="buttons">
                        <input
                            className="button"
                            type="submit"
                            value="Confirmer"
                        />
                    </div>
                </div>
            </form>

        </div>


    )
}
