import {useNavigate, useParams} from "react-router-dom";
import {useLoadingSwitcher} from "../../hooks/useLoading.jsx";
import {useFetch} from "../../hooks/useFetch.js";
import {AxiosError} from "../../components/AxiosError.jsx";
import {CheckField, OptionField, TextField} from "../../components/MemberCustomFiels.jsx";
import {ClubSelect} from "../../components/ClubSelect.jsx";
import {ConfirmDialog} from "../../components/ConfirmDialog.jsx";
import {toast} from "react-toastify";
import {
    apiAxios,
    CatList,
    getCatName, getShieldTypeName,
    getSwordTypeName,
    getToastMessage,
    ShieldList,
    sortCategories,
    SwordList,
    timePrint
} from "../../utils/Tools.js";
import React, {useEffect, useReducer, useState} from "react";
import {SimpleReducer} from "../../utils/SimpleReducer.jsx";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faAdd, faTrashCan} from "@fortawesome/free-solid-svg-icons";
import {Trans, useTranslation} from "react-i18next";
import ProtectionSelector from "../../components/ProtectionSelector.jsx";
import CategoryPreset from "../../assets/CategoryPreset.js";

export function CompetitionEdit() {
    const {id} = useParams()
    const navigate = useNavigate();
    const {t} = useTranslation();

    const setLoading = useLoadingSwitcher()
    const {data, refresh, error} = useFetch(`/competition/${id}?light=false`, setLoading, 1)

    const handleRm = () => {
        toast.promise(
            apiAxios.delete(`/competition/${id}`), getToastMessage("comp.toast.del")
        ).then(_ => {
            navigate("/competition")
        })
    }

    useEffect(() => {
        refresh(`/competition/${id}?light=false`)
    }, [id]);

    return <>
        <button type="button" className="btn btn-link" onClick={() => navigate("/competition")}>
            {t('back')}
        </button>
        <div>
            {data
                ? <div className="">

                    <Content data={data} refresh={refresh}/>

                    {data.id !== null && <button style={{marginBottom: "1.5em", width: "100%"}} className="btn btn-primary"
                                                 onClick={_ => navigate(`/competition/${data.id}/register`)}>
                        {t('comp.modifierLesParticipants')}</button>}

                    {data.id !== null && (data.system === "SAFCA" || data.system === "INTERNAL") &&
                        <ContentSAFCAAndInternal data2={data} type={data.system}/>}

                    {data.id !== null && <>
                        <div className="col" style={{textAlign: 'right', marginTop: '1em'}}>
                            <button className="btn btn-danger btn-sm" data-bs-toggle="modal"
                                    data-bs-target="#confirm-delete">{t('comp.supprimerLaCompétition')}
                            </button>
                        </div>
                        <ConfirmDialog title={t('comp.supprimerLaCompétition')}
                                       message={t('comp.supprimerLaCompétition.msg')}
                                       onConfirm={handleRm}/>
                    </>}
                </div>
                : error && <AxiosError error={error}/>
            }
        </div>
    </>
}

function ContentSAFCAAndInternal({data2, type = "SAFCA"}) {
    const getDataPath = type === "SAFCA" ? `/competition/${data2.id}/safcaData` : `/competition/${data2.id}/internalData`
    const setDataPath = type === "SAFCA" ? "/competition/safcaData" : "/competition/internalData"

    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(getDataPath, setLoading, 1)
    const {t} = useTranslation();

    const [state, dispatch] = useReducer(SimpleReducer, [])
    const [state2, dispatch2] = useReducer(SimpleReducer, [])

    useEffect(() => {
        if (data === null)
            return
        if (data.admin !== null) {
            let index = 0
            for (const d of data.admin) {
                dispatch({type: 'UPDATE_OR_ADD', payload: {id: index, data: d}})
                index++
            }
        }
        if (data.table !== null) {
            let index = 0
            for (const d of data.table) {
                dispatch2({type: 'UPDATE_OR_ADD', payload: {id: index, data: d}})
                index++
            }
        }
    }, [data]);

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

        const out = {}
        out['id'] = (data2.id === "") ? null : data2.id
        out['show_blason'] = event.target.show_blason.checked
        out['show_flag'] = event.target.show_flag.checked
        out['admin'] = state.map(d => d.data)
        out['table'] = state2.map(d => d.data)

        toast.promise(apiAxios.post(setDataPath, out), getToastMessage("comp.toast.params"))
    }

    return <>
        {data ?
            <form onSubmit={handleSubmit}>
                <input name="id" value={data2.id || ""} readOnly hidden/>
                <div className="card mb-4">
                    <div className="card-header">{t('configuration')}</div>
                    <div className="card-body text-center">

                        <div className="input-group mb-1">
                            <div className="input-group-text">
                                <input className="form-check-input mt-0" type="checkbox" aria-label={t('comp.aff.blason')}
                                       defaultChecked={data.show_blason} name="show_blason"/>
                            </div>
                            <span className="input-group-text">{t('comp.aff.blason')}</span>
                        </div>

                        <div className="input-group mb-3">
                            <div className="input-group-text">
                                <input className="form-check-input mt-0" type="checkbox" aria-label={t('comp.aff.flag')}
                                       defaultChecked={data.show_flag} name="show_flag"/>
                            </div>
                            <span className="input-group-text">{t('comp.aff.flag')}</span>
                        </div>

                        <span className="input-group-text">{t('administrateur')}</span>
                        <ul className="list-group form-control">
                            {state.map((d, index) => {
                                return <div key={index} className="input-group">
                                    <input type="text" className="form-control" value={d.data} required
                                           onChange={(e) => {
                                               dispatch({type: 'UPDATE_OR_ADD', payload: {id: d.id, data: e.target.value}})
                                           }}/>
                                    <button className="btn btn-danger"
                                            onClick={() => dispatch({type: 'REMOVE', payload: d.id})}>
                                        <FontAwesomeIcon icon={faTrashCan}/></button>
                                </div>
                            })}
                            <div className="d-grid gap-2 d-md-flex justify-content-md-end">
                                <button className="btn btn-success" onClick={e => {
                                    e.preventDefault();

                                    let maxId = 0;
                                    state.forEach((d) => {
                                        if (d.id > maxId)
                                            maxId = d.id;
                                    })

                                    dispatch({type: 'UPDATE_OR_ADD', payload: {id: maxId + 1, data: ""}})
                                }}><FontAwesomeIcon icon={faAdd}/></button>
                            </div>
                        </ul>

                        <div className="mb-3"></div>
                        <span className="input-group-text">{t('secrétariatsDeLice')}</span>
                        <ul className="list-group form-control">
                            {state2.map((d, index) => {
                                return <div key={index} className="input-group">
                                    <input type="text" className="form-control" value={d.data} required
                                           onChange={(e) => {
                                               dispatch2({type: 'UPDATE_OR_ADD', payload: {id: d.id, data: e.target.value}})
                                           }}/>
                                    <button className="btn btn-danger"
                                            onClick={() => dispatch2({type: 'REMOVE', payload: d.id})}>
                                        <FontAwesomeIcon icon={faTrashCan}/></button>
                                </div>
                            })}
                            <div className="d-grid gap-2 d-md-flex justify-content-md-end">
                                <button className="btn btn-success" onClick={e => {
                                    e.preventDefault();

                                    let maxId = 0;
                                    state2.forEach((d) => {
                                        if (d.id > maxId)
                                            maxId = d.id;
                                    })

                                    dispatch2({type: 'UPDATE_OR_ADD', payload: {id: maxId + 1, data: ""}})
                                }}><FontAwesomeIcon icon={faAdd}/></button>
                            </div>
                        </ul>
                        <div className="row" style={{marginTop: "1em"}}>
                            <div className="d-grid gap-2 d-md-flex justify-content-md-end">
                                <button type="submit" className="btn btn-primary">{t('button.enregistrer')}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            : error && <AxiosError error={error}/>}
    </>
}

function Content({data}) {
    const navigate = useNavigate();
    const [registerMode, setRegisterMode] = useState(data.registerMode || "FREE");
    const [modaleState, setModaleState] = useState({})
    const [presets, setPresets] = useState(data.presets || []);
    const [cats, setCats] = useState(data.requiredWeight || [])
    const [presetChange, setPresetChange] = useState(false)
    const {t} = useTranslation();

    const setCat = (e, cat) => {
        if (e.target.checked) {
            if (!cats.includes(cat)) {
                setCats([...cats, cat])
            }
        } else {
            setCats(cats.filter(c => c !== cat))
        }
    }
    const isCatSelected = (cat) => cats.includes(cat)

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

        let err = false;

        const out = {}
        out['id'] = (data.id === "") ? null : data.id
        out['name'] = event.target.name?.value
        out['date'] = event.target.date?.value
        out['toDate'] = event.target.toDate?.value
        out['system'] = event.target.system?.value
        out['club'] = event.target.club?.value
        out['owner'] = event.target.owner?.value
        out['description'] = event.target.description?.value
        out['adresse'] = event.target.adresse?.value
        out['publicVisible'] = event.target.publicVisible?.checked

        out['startRegister'] = event.target.startRegister?.value
        out['endRegister'] = event.target.endRegister?.value
        out['registerMode'] = registerMode
        out['presets'] = presets
        out['requiredWeight'] = cats

        if (out['registerMode'] === "HELLOASSO") {
            out['data3'] = event.target.data3?.value

            const url = event.target.helloassoUrl?.value

            if (!url || !event.target.data3?.value) {
                toast.error(t('comp.ha.error1'))
                err = true;
            } else {
                const regex = /\/associations\/([^/]+)\/evenements\/([^/]+)/;
                const match = url.match(regex);

                if (match) {
                    out['data1'] = match[1]
                    out['data2'] = match[2]
                } else {
                    toast.error(t('comp.ha.error2'))
                    err = true;
                }
            }

            out['data4'] = event.target.data4?.value
            if (!out['data4']) {
                toast.error(t('comp.ha.error3'))
                err = true;
            }
        }

        if (out['date'] > out['toDate']) {
            toast.error(t('comp.error1'))
            err = true;
        }

        if ((out['registerMode'] === "FREE" || out['registerMode'] === "CLUB_ADMIN") && (!out['startRegister'] || !out['endRegister'])) {
            toast.error(t('comp.error2'))
            err = true;
        }
        if ((out['registerMode'] === "FREE" || out['registerMode'] === "CLUB_ADMIN") && out['startRegister'] > out['endRegister']) {
            toast.error(t('comp.error3'))
            err = true;
        }

        if (err) {
            return;
        }

        toast.promise(
            apiAxios.post(`/competition`, out), getToastMessage("comp.toast.save")
        ).then(data => {
            setPresetChange(false)
            console.log(data.data)
            if (data.data.id !== undefined)
                navigate("/competition/" + data.data.id)
            if (data.data.presets !== undefined)
                setPresets(data.data.presets)
        })
    }

    return <>
        <form onSubmit={handleSubmit} className="card mb-4">
            <input name="id" value={data.id || ""} readOnly hidden/>
            <div className="card-header">{data.id ? t('comp.editionCompétition') : t('comp.créationCompétition')}</div>
            <div className="card-body text-center">

                <div className="accordion" id="accordionExample">
                    <div className="accordion-item">
                        <h2 className="accordion-header">
                            <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                    aria-expanded="false" aria-controls="collapseOne">
                                {t('comp.informationsTechniques')}
                            </button>
                        </h2>
                        <div id="collapseOne" className="accordion-collapse collapse" data-bs-parent="#accordionExample">
                            <div className="accordion-body">
                                <TextField name="uuid" text="UUID" value={data.uuid} disabled={true}/>
                                <OptionField name="system" text="System" value={data.system} values={{SAFCA: 'SAFCA', INTERNAL: "Intranet"}}
                                             disabled={data.id !== null}/>
                                {data.id !== null &&
                                    <div className="row">
                                        <ClubSelect defaultValue={data.club} name="club" na={false} disabled={true}/>
                                    </div>
                                }
                                {data.id !== null && <TextField name="owner" text="Propriétaire" value={data.owner}/>}
                            </div>
                        </div>
                    </div>
                    <div className="accordion-item">
                        <h2 className="accordion-header">
                            <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                                    aria-expanded="true" aria-controls="collapseTwo">
                                {t('comp.informationsGénéralesSurLaCompétition')}
                            </button>
                        </h2>
                        <div id="collapseTwo" className="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                            <div className="accordion-body">
                                <TextField name="name" text={t('nom') + "*"} value={data.name}/>
                                <div className="input-group mb-3">
                                    <span className="input-group-text" id="date">{t('date')}*</span>
                                    <span className="input-group-text" id="date">{t('du')}</span>
                                    <input type="date" className="form-control" placeholder="jj/mm/aaaa" aria-label="date"
                                           name="date" aria-describedby="date" defaultValue={data.date ? data.date.split('T')[0] : ''} required/>
                                    <span className="input-group-text" id="date">{t('au')}</span>
                                    <input type="date" className="form-control" placeholder="jj/mm/aaaa" aria-label="toDate"
                                           name="toDate" aria-describedby="toDate" defaultValue={data.toDate ? data.toDate.split('T')[0] : ''}
                                           required/>
                                </div>
                                <TextField name="description" text={t('description')} value={data.description} required={false}/>
                                <TextField name="adresse" text={t('adresse')} value={data.adresse} required={false}/>
                                <CheckField name="publicVisible" text={t('comp.text2')}
                                            value={data.publicVisible} row={true}/>
                                <small>{t('comp.text3')}</small>
                            </div>
                        </div>
                    </div>

                    <div className="accordion-item">
                        <h2 className="accordion-header">
                            <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour"
                                    aria-expanded="false" aria-controls="collapseFour">
                                Catégories proposées
                            </button>
                        </h2>
                        <div id="collapseFour" className="accordion-collapse collapse" data-bs-parent="#accordionExample">
                            <div className="accordion-body" style={{textAlign: "left"}}>
                                <div className="list-group">
                                    {presets.sort((a, b) => a.name.localeCompare(b.name)).map((preset) =>
                                        <a key={preset.id} className="list-group-item list-group-item-action" data-bs-toggle="modal"
                                           data-bs-target="#catModal" onClick={() => setModaleState(preset)}>
                                            <span style={{margin: "0 0.25em 0 0"}}>{preset.name}</span>
                                            {preset.categories.map(e => e.categorie).sort(sortCategories).map((cat, index) =>
                                                <span key={index} className="badge text-bg-secondary"
                                                      style={{margin: "0 0.25em"}}>{getCatName(cat)}</span>)}
                                        </a>)}
                                </div>
                                <div className="row" style={{marginTop: "1em"}}>
                                    <div className="col-auto"
                                         style={{color: "red"}}>{presetChange && t('LesModificationsNontEnregistrer')}</div>
                                    <div className="col" style={{textAlign: "right"}}>
                                        <div className="btn-group">
                                            <button type="button" className="btn btn-success" data-bs-toggle="modal"
                                                    data-bs-target="#catModal"
                                                    onClick={() => setModaleState({id: Math.min(...presets.map(p => p.id), 0) - 1})}>
                                                <FontAwesomeIcon icon={faAdd}/>
                                            </button>
                                            <button type="button" className="btn btn-success dropdown-toggle dropdown-toggle-split"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                <span className="visually-hidden">Toggle Dropdown</span>
                                            </button>
                                            <ul className="dropdown-menu">
                                                {CategoryPreset.map((preset, index) =>
                                                    <li key={index}>
                                                        <button className="dropdown-item" type="button" data-bs-toggle="modal"
                                                                data-bs-target="#catModal"
                                                                onClick={() => setModaleState({id: Math.min(...presets.map(p => p.id), 0) - 1, ...preset})}>
                                                            {preset.name}
                                                        </button>
                                                    </li>)}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="accordion-item">
                        <h2 className="accordion-header">
                            <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
                                    aria-expanded="false" aria-controls="collapseThree">
                                {t('comp.informationsSurLeModeDinscription')}
                            </button>
                        </h2>
                        <div id="collapseThree" className="accordion-collapse collapse" data-bs-parent="#accordionExample">
                            <div className="accordion-body">

                                <div className="row">
                                    <div className="input-group mb-3">
                                        <label className="input-group-text">{t('comp.quiPeutInscrire')}</label>
                                        <select className="form-select" value={registerMode} onChange={event => setRegisterMode(event.target.value)}>
                                            <option value="FREE">{t('comp.tousLesMembresDeLaFfsaf')}</option>
                                            <option value="CLUB_ADMIN">{t('comp.responsablesEtBureauxDesAssociations')}</option>
                                            <option value="ADMIN">{t('comp.uniquementLesAdministrateursDeLaCompétition')}</option>
                                            <option value="HELLOASSO">{t('comp.billetterieHelloasso')}</option>
                                        </select>
                                    </div>
                                </div>

                                <div className="input-group mb-3"
                                     style={{display: registerMode === "FREE" || registerMode === "CLUB_ADMIN" ? "flex" : "none"}}>
                                    <span className="input-group-text" id="startRegister">{t('comp.dateDinscription')}</span>
                                    <span className="input-group-text" id="startRegister">{t('du')}</span>
                                    <input type="datetime-local" className="form-control" placeholder="jj/mm/aaaa" aria-label="date"
                                           name="startRegister" aria-describedby="startRegister"
                                           defaultValue={data.startRegister ? data.startRegister.substring(0, 16) : ''}/>
                                    <span className="input-group-text" id="endRegister">{t('au')}</span>
                                    <input type="datetime-local" className="form-control" placeholder="jj/mm/aaaa" aria-label="endRegister"
                                           name="endRegister" aria-describedby="endRegister"
                                           defaultValue={data.endRegister ? data.endRegister.substring(0, 16) : ''}/>
                                </div>

                                <div className="input-group mb-3" style={{display: "flex" }}>
                                    <span className="input-group-text" id="startRegister">{t('poidsDemandéPour')}</span>
                                    {CatList.map((cat, index) => <div key={index} className="input-group-text">
                                        <input className="form-check-input mt-0" type="checkbox" id={"catInput" + index} checked={isCatSelected(cat)}
                                               aria-label={getCatName(cat)} onChange={e => setCat(e, cat)}/>
                                        <label style={{marginLeft: "0.5em"}} htmlFor={"catInput" + index}>{getCatName(cat)}</label>
                                    </div>)}
                                </div>

                                <div style={{display: registerMode === "HELLOASSO" ? "initial" : "none"}}>
                                 <span style={{textAlign: "left"}}>
                                     <div>{t('comp.ha.text1')}</div>
                                    <ul>
                                        <li><Trans i18nKey="comp.ha.text2"></Trans>
                                            <img src="/img/HA-help-4.png" alt="" className="img-fluid" style={{objectFit: "contain"}}/></li>
                                        <li><Trans i18nKey="comp.ha.text3"></Trans>
                                            <img src="/img/HA-help-3.png" className="img-fluid" alt="..." style={{object_fit: 'contain'}}/>
                                            <img src="/img/HA-help-2.png" className="img-fluid" alt="..." style={{object_fit: 'contain'}}/></li>
                                        <li><Trans i18nKey="comp.ha.text4"></Trans></li>
                                    </ul>
                                </span>

                                    <TextField name="helloassoUrl" text={t('comp.ha.text5')} required={false}
                                               value={data.data1 && data.data2 && `https://www.helloasso.com/associations/${data.data1}/evenements/${data.data2}` || ""}
                                               placeholder="https://www.helloasso.com/associations/nom-asso-sur-helloasso/evenements/nom-billetterie"/>

                                    <TextField name="data3" text={t('comp.ha.tarifsHelloasso')}
                                               value={data.data3 || ""} required={false}
                                               placeholder="Tarif1;Tarif2;Tarif3"/>

                                    <TextField name="data4" text={t('comp.ha.emailDeRéceptionDesInscriptionséchoué')}
                                               value={data.data4 || ""} required={false}/>
                                    <small>{t('comp.ha.text6')}</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="row" style={{marginTop: "1em"}}>
                        <div className="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="submit" className="btn btn-primary">{t('button.enregistrer')}</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div className="modal fade" id="catModal" tabIndex="-1" aria-labelledby="catModalLabel" aria-hidden="true">
            <div className="modal-dialog  modal-dialog-scrollable modal-lg modal-fullscreen-lg-down">
                <div className="modal-content">
                    <CatModalContent setPresets={setPresets} setPresetChange={setPresetChange} state={modaleState}/>
                </div>
            </div>
        </div>
    </>
}

function CatModalContent({setPresets, setPresetChange, state}) {
    const [name, setName] = useState(state.name || "")
    const [sword, setSword] = useState(state.sword || "NONE")
    const [shield, setShield] = useState(state.shield || "NONE")
    const [cats, setCats] = useState(state.categories || [])
    const [mandatoryProtection1, setMandatoryProtection1] = useState(state.mandatoryProtection1 || 5)
    const [mandatoryProtection2, setMandatoryProtection2] = useState(state.mandatoryProtection2 || 5)

    const {t} = useTranslation();

    useEffect(() => {
        setName(state.name || "")
        setSword(state.sword || "NONE")
        setShield(state.shield || "NONE")
        setCats(state.categories?.map(c => ({
            categorie: c.categorie,
            roundDuration: timePrint(c.roundDuration),
            pauseDuration: timePrint(c.pauseDuration)
        })) || [])
        setMandatoryProtection1(state.mandatoryProtection1 || 5)
        setMandatoryProtection2(state.mandatoryProtection2 || 5)
    }, [state]);

    const setCat = (e, cat) => {
        if (e.target.checked) {
            if (!cats.includes(cat)) {
                setCats([...cats, {categorie: cat, roundDuration: "", pauseDuration: ""}])
            }
        } else {
            setCats(cats.filter(c => c.categorie !== cat))
        }
    }
    const setTime = (e, cat) => {
        const value = e.target.value;
        setCats(cats.map(c => {
            if (c.categorie === cat)
                return {...c, roundDuration: value}
            return c
        }))
    }
    const setPause = (e, cat) => {
        const value = e.target.value;
        setCats(cats.map(c => {
            if (c.categorie === cat)
                return {...c, pauseDuration: value}
            return c
        }))
    }

    const isCatSelected = (cat) => cats.some(cat_ => cat_.categorie === cat)

    const parseTime = (str) => {
        const parts = str.split(":").map(part => parseInt(part, 10));
        if (parts.length === 1) {
            return parts[0] * 1000;
        } else if (parts.length === 2) {
            return (parts[0] * 60 + parts[1]) * 1000;
        } else {
            return 0;
        }
    }

    const handleSave = () => {
        const out = {
            id: state.id,
            name: name,
            sword: sword,
            shield: shield,
            categories: cats.map(c => ({
                categorie: c.categorie,
                roundDuration: parseTime(c.roundDuration),
                pauseDuration: parseTime(c.pauseDuration)
            })),
            mandatoryProtection1: mandatoryProtection1,
            mandatoryProtection2: mandatoryProtection2
        }
        setPresets(presets => [...presets.filter(p => p.id !== out.id), out])
        setPresetChange(true)
    }

    const handleRm = () => {
        setPresets(presets => presets.filter(p => p.id !== state.id))
        setPresetChange(true)
    }

    return <>
        <div className="modal-header">
            <h1 className="modal-title fs-5" id="CategorieModalLabel">{t('configurationDeLaCatégorie')}</h1>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div className="modal-body">
            <div className="row">
                <div className="col-12 col-md-7  mb-3">
                    <div className="input-group mb-3">
                        <span className="input-group-text" id="categorie">{t("nom")}</span>
                        <input type="text" className="form-control" placeholder={t("nom")} name="name"
                               value={name} onChange={e => setName(e.target.value)}/>
                    </div>

                    <div className="input-group mb-3">
                        <span className="input-group-text" id="sword">{t('arme')}</span>
                        <select className="form-select" aria-label={t('arme')} name="sword" value={sword}
                                onChange={e => setSword(e.target.value)}>
                            {SwordList.map(sword =>
                                <option key={sword} value={sword}>{getSwordTypeName(sword)}</option>
                            )}
                        </select>
                    </div>

                    <div className="input-group mb-3">
                        <span className="input-group-text" id="shield">{t('bouclier')}</span>
                        <select className="form-select" aria-label={t('bouclier')} name="shield" value={shield}
                                onChange={e => setShield(e.target.value)}>
                            {ShieldList.map(shield =>
                                <option key={shield} value={shield}>{getShieldTypeName(shield)}</option>
                            )}
                        </select>
                    </div>

                    <table className="table" style={{textAlign: "center"}}>
                        <thead>
                        <tr>
                            <th scope="col">{t('catégorie')}</th>
                            <th scope="col">{t('peutSinscrire')}</th>
                            <th scope="col">{t('duréeRound')}</th>
                            <th scope="col">{t('duréePause')}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {CatList.map((cat, index) => <tr key={index} style={{verticalAlign: "middle"}}>
                            <th scope="row" style={{width: "7em"}}><label htmlFor={"catInput" + index}>{getCatName(cat)}</label></th>
                            <td><input className="form-check-input" type="checkbox" id={"catInput" + index} checked={isCatSelected(cat)}
                                       aria-label={getCatName(cat)} onChange={e => setCat(e, cat)}/></td>
                            <td style={{padding: "0"}}><input type="text" className="form-control form-control-sm" placeholder="mm:ss"
                                                              value={cats.find(c => c.categorie === cat)?.roundDuration || ""}
                                                              onChange={e => setTime(e, cat)}
                                                              aria-label="mm:ss" hidden={!isCatSelected(cat)} style={{width: "4.5em"}}/></td>
                            <td style={{padding: "0"}}><input type="text" className="form-control form-control-sm" placeholder="mm:ss"
                                                              value={cats.find(c => c.categorie === cat)?.pauseDuration || ""}
                                                              onChange={e => setPause(e, cat)}
                                                              aria-label="mm:ss" hidden={!isCatSelected(cat)} style={{width: "4.5em"}}/></td>
                        </tr>)}
                        </tbody>
                    </table>
                </div>

                <div className="col-12 col-md-5">
                    <div style={{textAlign: "center"}}>
                        <h6>{t('protectionObligatoire')} :</h6>
                        {cats.some(cat_ => CatList.indexOf(cat_.categorie) <= CatList.indexOf("JUNIOR")) && <>
                            <div>&lt; 18 {t('ans')}</div>
                            <ProtectionSelector shield={shield !== "NONE"} mandatoryProtection={mandatoryProtection1}
                                                setMandatoryProtection={setMandatoryProtection1}/>
                        </>}
                        {cats.some(cat_ => CatList.indexOf(cat_.categorie) > CatList.indexOf("JUNIOR")) && <>
                            <div>&ge; 18 {t('ans')}</div>
                            <ProtectionSelector shield={shield !== "NONE"} mandatoryProtection={mandatoryProtection2}
                                                setMandatoryProtection={setMandatoryProtection2}/>
                        </>}
                    </div>
                </div>
            </div>
        </div>
        <div className="modal-footer">
            <button type="button" className="btn btn-danger" data-bs-dismiss="modal" onClick={handleRm}>{t('button.supprimer')}</button>
            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">{t('button.fermer')}</button>
            <button type="button" className="btn btn-primary" data-bs-dismiss="modal" onClick={handleSave}>{t('button.appliquer')}</button>
        </div>
    </>
}
