import {useNavigate} from "react-router-dom";
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 {ClubSelect} from "../../../components/ClubSelect.jsx";
import {addPhoto} from "./InformationForm.jsx";

export function NewMemberPage() {
    const navigate = useNavigate();

    return <>
        <h2>Page membre</h2>
        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/member")}>
            &laquo; retour
        </button>
        <div>
            <div className="row">
                <Form/>
            </div>
        </div>
    </>
}

function Form() {
    const navigate = useNavigate();
    const setLoading = useLoadingSwitcher()

    const handleSubmit = (event) => {
        event.preventDefault();
        setLoading(1)

        const formData = new FormData();
        formData.append("id", -1);
        formData.append("lname", event.target.lname?.value.toUpperCase());
        formData.append("fname", event.target.fname?.value);
        formData.append("categorie", event.target.category?.value);
        formData.append("club", event.target.club?.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);
        formData.append("grade_arbitrage", event.target.grade_arbitrage?.value);

        const send = (formData_) => {
            apiAxios.post(`/member`, formData_, {
                headers: {
                    'Accept': '*/*',
                    'Content-Type': 'multipart/form-data',
                }
            }).then(data => {
                toast.success('Profile crée avec succès 🎉');
                navigate(`/admin/member/${data.data}`)
            }).catch(e => {
                console.log(e.response)
                toast.error('Échec de la création du profile 😕 (code: ' + e.response.status + ')');
            }).finally(() => {
                if (setLoading)
                    setLoading(0)
            })
        }

        addPhoto(event, formData, send);
    }

    return <form onSubmit={handleSubmit}>
        <div className="card mb-4">
            <div className="card-header">Nouveau membre</div>
            <div className="card-body">
                <TextField name="lname" text="Nom"/>
                <TextField name="fname" text="Prénom"/>
                <TextField name="email" text="Email" placeholder="name@example.com"
                           type="email" required={false}/>
                <OptionField name="genre" text="Genre" values={{NA: 'N/A', H: 'H', F: 'F'}}/>
                <CountryList name="country" text="Pays" value={"FR"}/>
                <BirthDayField/>
                <div className="row">
                    <ClubSelect name="club" na={true}/>
                </div>
                <RoleList name="role" text="Rôle" value={'MEMBRE'}/>
                <OptionField name="grade_arbitrage" text="Grade d'arbitrage" value={'NA'}
                             values={{NA: 'N/A', ASSESSEUR: 'Assesseur', ARBITRE: 'Arbitre'}}/>
                <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">Créer</button>
                    </div>
                </div>
            </div>
        </div>
    </form>;
}
