ffsaf-site/src/main/webapp/src/pages/admin/club/NewClubPage.jsx

import {useNavigate} from "react-router-dom";
import {LoadingProvider} from "../../../hooks/useLoading.jsx";
import {useFetch} from "../../../hooks/useFetch.js";
import {toast} from "react-toastify";
import {apiAxios, errFormater} from "../../../utils/Tools.js";
import {CountryList, TextField} from "../../../components/MemberCustomFiels.jsx";

import {useRef, useState} from "react";
import {LocationEditor, LocationEditorModal} from "../../../components/Club/LocationEditor.jsx";
import {ContactEditor} from "../../../components/Club/ContactEditor.jsx";
import {HoraireEditor} from "../../../components/Club/HoraireEditor.jsx";

export function NewClubPage() {
    const navigate = useNavigate()

    return <>
        <h2>Page nouveau club</h2>
        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/club")}>
            &laquo; retour
        </button>
        <div>
            <div className="row">
                <div className="col-lg-9">
                    <LoadingProvider>
                        <InformationForm/>
                    </LoadingProvider>
                </div>
            </div>
        </div>
    </>
}

function InformationForm() {
    const [switchOn, setSwitchOn] = useState(false);
    const [modal, setModal] = useState({id: -1})
    const locationModalCallback = useRef(null)
    const navigate = useNavigate()

    const {data} = useFetch(`/club/contact_type`)

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

        const formData = new FormData(event.target);

        toast.promise(
            apiAxios.put(`/club`, formData),
            {
                pending: "Création du club en cours",
                success: "Club créé avec succès 🎉",
                error: {
                    render({data}) {
                        return errFormater(data, "Échec de la création du club")
                    }
                }
            }
        ).then(data => {
            navigate(`/admin/club/${data.data}`);
        })
    }

    return <>
        <form onSubmit={handleSubmit} autoComplete="off">
            <div className="card mb-4">
                <div className="card-header">Nouveau club</div>
                <div className="card-body text-center">

                    <TextField name="name" text="Nom*"/>
                    <CountryList name="country" text="Pays*" value={"FR"}/>

                    <div className="mb-3">
                        <div className="input-group">
                            <label className="input-group-text" htmlFor="logo">Blason</label>
                            <input type="file" className="form-control" id="logo" name="logo"
                                   accept=".jpg,.jpeg,.gif,.png,.svg"/>
                        </div>
                    </div>

                    <div className="input-group mb-3">
                        <div className="input-group-text">
                            <input type="checkbox" className="form-check-input mt-0" name="international" id="international"
                                   checked={switchOn} onChange={() => setSwitchOn(!switchOn)}/>
                            <label className="input-group-text" htmlFor="international">Club externe</label>
                        </div>
                    </div>
                    {!switchOn && <>
                        <TextField name="state_id" text="SIRET ou RNA" required={false}/>
                        <TextField name="contact_intern" text="Contact interne" required={false} placeholder="example@test.com"/>
                        <TextField name="address" text="Adresse administrative" required={false} placeholder="Adresse administrative"/>

                        <div className="mb-3">
                            <div className="input-group">
                                <label className="input-group-text" htmlFor="status">Status</label>
                                <input type="file" className="form-control" id="status" name="status" accept=".pdf,.txt"/>
                            </div>
                        </div>

                        <ContactEditor data={{contact: {}, contactMap: data}}/>
                        <LocationEditor data={{training_location: null}} setModal={setModal} sendData={locationModalCallback}/>
                        <HoraireEditor data={{training_day_time: null}}/>
                    </>
                    }
                </div>
                <div className="row mb-3">
                    <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>
        </form>

        <LocationEditorModal modal={modal} sendData={locationModalCallback}/>
    </>
}