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

export function NewMemberPage() {
    const navigate = useNavigate();
    const {t} = useTranslation();

    return <>
        <h2>{t('pageMembre')}</h2>
        <button type="button" className="btn btn-link" onClick={() => navigate("/club/member")}>
            {t('back')}
        </button>
        <div>
            <div className="row">
                <Form/>
            </div>
        </div>
    </>
}

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

    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("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);

        const send = (formData_) => {
            toast.promise(
                apiAxios.post(`/member/club`, formData_, {
                    headers: {
                        'Accept': '*/*',
                        'Content-Type': 'multipart/form-data',
                    }
                }), getToastMessage("membre.toast.save")
            ).then(data => {
                navigate(`/club/member/${data.data}`)
            }).finally(() => {
                if (setLoading)
                    setLoading(0)
            })
        }
        addPhoto(event, formData, send);
    }

    return <form onSubmit={handleSubmit}>
        <div className="card mb-4">
            <div className="card-header">{t('nouveauMembre')}</div>
            <div className="card-body">
                <TextField name="lname" text={t('nom')}/>
                <TextField name="fname" text={t('prenom')}/>
                <TextField name="email" text={t('email')} placeholder="name@example.com"
                           type="email"/>
                <OptionField name="genre" text={t('genre')} values={{NA: 'N/A', H: 'H', F: 'F'}}/>
                <CountryList name="country" text={t('pays')} value={"FR"}/>
                <BirthDayField/>
                <div className="row">
                    <div className="input-group mb-3">
                        <label className="input-group-text" htmlFor="url_photo">{t('photos')}
                            {t('(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">{t('button.créer')}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>;
}
