// noinspection DuplicatedCode

import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
import {apiAxios} from "../../../utils/Tools.js";
import {toast} from "react-toastify";
import {BirthDayField, CountryList, OptionField, RoleList, TextField} from "../../../components/MemberCustomFiels.jsx";
import {addPhoto} from "../../admin/member/InformationForm.jsx";

export function InformationForm({data}) {
    const setLoading = useLoadingSwitcher()
    const handleSubmit = (event) => {
        event.preventDefault();
        setLoading(1)

        const formData = new FormData();
        formData.append("id", data.id);
        formData.append("lname", event.target.lname?.value.toUpperCase());
        formData.append("fname", event.target.fname?.value);
        formData.append("categorie", event.target.category?.value);
        formData.append("genre", event.target.genre?.value);
        formData.append("country", event.target.country?.value);
        formData.append("birth_date", new Date(event.target.birth_date?.value).toUTCString());
        formData.append("email", event.target.email?.value);
        formData.append("role", event.target.role?.value);

        const send = (formData_) => {
            apiAxios.put(`/member/club/${data.id}`, formData_, {
                headers: {
                    'Accept': '*/*',
                    'Content-Type': 'multipart/form-data',
                }
            }).then(_ => {
                toast.success('Profile mis à jours avec succès 🎉');
            }).catch(e => {
                console.log(e.response)
                toast.error('Échec de la mise à jours du profile 😕 (code: ' + e.response.status + ': ' + e.response.data + ')');
            }).finally(() => {
                if (setLoading)
                    setLoading(0)
            })
        }
        addPhoto(event, formData, send);
    }

    return <form onSubmit={handleSubmit}>
        <div className="card mb-4">
            <div className="card-header">Information</div>
            <div className="card-body">
                <TextField name="lname" text="Nom" value={data.lname}/>
                <TextField name="fname" text="Prénom" value={data.fname}/>
                <TextField name="email" text="Email" value={data.email} placeholder="name@example.com"
                           type="email" ttip={<small className="form-text">L'email sert à la création de compte pour se connecter au site et doit être unique. <br/>
                    Pour les mineurs, l'email des parents peut être utilisé plusieurs fois grâce à la syntaxe suivante : {'email.parent+<caractères alphanumériques>@exemple.com'}.<br/>
                            Exemples : mail.parent+1@exemple.com, mail.parent+titouan@exemple.com, mail.parent+cedrique@exemple.com</small>}/>
                <OptionField name="genre" text="Genre" value={data.genre}
                             values={{NA: 'N/A', H: 'H', F: 'F'}}/>
                <CountryList name="country" text="Pays" value={data.country}/>
                <BirthDayField inti_date={data.birth_date ? data.birth_date.split('T')[0] : ''}
                               inti_category={data.categorie}/>
                <RoleList name="role" text="Rôle" value={data.role}/>
                <OptionField name="grade_arbitrage" text="Grade d'arbitrage" value={data.grade_arbitrage}
                             values={{NA: 'N/A', ASSESSEUR: 'Assesseur', ARBITRE: 'Arbitre'}} disabled={true}/>
                <div className="row">
                    <div className="input-group mb-3">
                        <label className="input-group-text" htmlFor="url_photo">Photos
                            (optionnelle)</label>
                        <input type="file" className="form-control" id="url_photo" name="url_photo"
                               accept=".jpg,.jpeg,.gif,.png,.svg"/>
                    </div>
                </div>
                <div className="row">
                    <div className="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" className="btn btn-primary">Enregistrer</button>
                    </div>
                </div>
            </div>
        </div>
    </form>;
}
