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, errFormater} from "../../utils/Tools.js";
import {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";

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

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

    const handleRm = () => {
        toast.promise(
            apiAxios.delete(`/competition/${id}`),
            {
                pending: "Suppression de la compétition en cours...",
                success: "Compétition supprimé avec succès 🎉",
                error: {
                    render({data}) {
                        return errFormater(data, "Échec de la suppression de la compétition")
                    }
                },
            }
        ).then(_ => {
            navigate("/competition")
        })
    }

    return <>
        <button type="button" className="btn btn-link" onClick={() => navigate("/competition")}>
            &laquo; retour
        </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?type=${data.registerMode}`)}>Voir/Modifier les participants</button>}

                    {data.id !== null && data.system === "SAFCA" && <ContentSAFCA data2={data}/>}

                    {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">Supprimer la compétition
                            </button>
                        </div>
                        <ConfirmDialog title="Supprimer la compétition"
                                       message="Êtes-vous sûr de vouloir supprimer cette compétition est tout les resultat associer?"
                                       onConfirm={handleRm}/>
                    </>}
                </div>
                : error && <AxiosError error={error}/>
            }
        </div>
    </>
}

function ContentSAFCA({data2}) {
    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/competition/${data2.id}/safcaData`, setLoading, 1)

    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(`/competition/safcaData`, out),
            {
                pending: "Enregistrement des paramètres en cours",
                success: "Paramètres enregistrée avec succès 🎉",
                error: {
                    render({data}) {
                        return errFormater(data, "Échec de l'enregistrement des paramètres")
                    }
                },
            }
        )
    }

    return <>
        {data ?
            <form onSubmit={handleSubmit}>
                <input name="id" value={data2.id || ""} readOnly hidden/>
                <div className="card mb-4">
                    <div className="card-header">Configuration SAFCA</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="Afficher le blason du club sur les écrans"
                                       defaultChecked={data.show_blason} name="show_blason"/>
                            </div>
                            <span className="input-group-text">Afficher le blason du club sur les écrans</span>
                        </div>

                        <div className="input-group mb-3">
                            <div className="input-group-text">
                                <input className="form-check-input mt-0" type="checkbox" aria-label="Afficher le pays du combattant sur les écrans"
                                       defaultChecked={data.show_flag} name="show_flag"/>
                            </div>
                            <span className="input-group-text">Afficher le pays du combattant sur les écrans</span>
                        </div>

                        <span className="input-group-text">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">Table</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>
                    <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>
            : error && <AxiosError error={error}/>}
    </>
}

function Content({data}) {
    const navigate = useNavigate();
    const [registerMode, setRegisterMode] = useState(data.registerMode || "FREE");

    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

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

            const url = event.target.helloassoUrl?.value

            if (!url || !event.target.data3?.value) {
                toast.error("Veuillez renseigner l'URL de la billetterie HelloAsso et les tarifs associés.")
                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("L'URL de la billetterie HelloAsso n'est pas valide. Veuillez vérifier le format de l'URL.")
                    err = true;
                }
            }

            out['data4'] = event.target.data4?.value
            if (!out['data4']) {
                toast.error("Veuillez renseigner l'email de réception des inscriptions échouées.")
                err = true;
            }
        }

        if (out['date'] > out['toDate']) {
            toast.error("La date de fin doit être postérieure à la date de début.")
            err = true;
        }

        if ((out['registerMode'] === "FREE" || out['registerMode'] === "CLUB_ADMIN") && (!out['startRegister'] || !out['endRegister'])) {
            toast.error("Veuillez renseigner les dates de début et de fin d'inscription.")
            err = true;
        }
        if ((out['registerMode'] === "FREE" || out['registerMode'] === "CLUB_ADMIN") && out['startRegister'] > out['endRegister']) {
            toast.error("La date de fin d'inscription doit être postérieure à la date de début d'inscription.")
            err = true;
        }

        if (err) {
            return;
        }

        toast.promise(
            apiAxios.post(`/competition`, out),
            {
                pending: "Enregistrement du club en cours",
                success: "Club enregistrée avec succès 🎉",
                error: {
                    render({data}) {
                        return errFormater(data, "Échec de l'enregistrement du club")
                    }
                },
            }
        ).then(data => {
            if (data.id !== undefined)
                navigate("/competition/" + data.id)
        })
    }

    return <form onSubmit={handleSubmit}>
        <div className="card mb-4">
            <input name="id" value={data.id || ""} readOnly hidden/>
            <div className="card-header">{data.id ? "Edition compétition" : "Création compé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">
                                Informations techniques
                            </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', NONE: "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">
                                Informations générales sur la compétition
                            </button>
                        </h2>
                        <div id="collapseTwo" className="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                            <div className="accordion-body">
                                <TextField name="name" text="Nom*" value={data.name}/>
                                <div className="input-group mb-3">
                                    <span className="input-group-text" id="date">Date*</span>
                                    <span className="input-group-text" id="date">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">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="Description" value={data.description} required={false}/>
                                <TextField name="adresse" text="Adresse" value={data.adresse} required={false}/>
                                <CheckField name="publicVisible" text="Visible par le public (Apparaît dans la liste des compétitions)"
                                            value={data.publicVisible} row={true}/>
                                <small>Si non coché, la compétition ne sera visible que par les personnes pouvant y inscrire des participants.</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="#collapseThree"
                                    aria-expanded="false" aria-controls="collapseThree">
                                Informations sur le mode d'inscription
                            </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">Qui peut inscrire</label>
                                        <select className="form-select" value={registerMode} onChange={event => setRegisterMode(event.target.value)}>
                                            <option value="FREE">Tous les membres de la FFSAF</option>
                                            <option value="CLUB_ADMIN">Responsables et bureaux des associations</option>
                                            <option value="ADMIN">Uniquement les administrateurs de la compétition</option>
                                            <option value="HELLOASSO">Billetterie HelloAsso</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">Date d'inscription</span>
                                    <span className="input-group-text" id="startRegister">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.split('+')[0] : ''}/>
                                    <span className="input-group-text" id="endRegister">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.split('+')[0] : ''}/>
                                </div>

                                <div style={{display: registerMode === "HELLOASSO" ? "initial" : "none"}}>
                                 <span style={{textAlign: "left"}}>
                                     <div>Afin de permettre une bonne interconnexion avec HelloAsso, merci de suivre les instructions suivantes :</div>
                                    <ul>
                                        <li><strong>Configurer l'url de notification : </strong>afin que nous puissions recevoir une notification à
                                            chaque inscription, il est nécessaire de configurer l'url de notification de votre compte HelloAsso pour
                                            qu'il redirige vers "https://intra.ffsaf.fr/api/webhook/ha". Pour ce faire, depuis la page d'accueil de
                                            votre association sur HelloAsso, allez dans <strong>Mon compte</strong> &gt; <strong>Paramètres</strong> &gt;
                                            <strong> Intégrations et API</strong> section Notification et copier-coller <strong>https://intra.ffsaf.fr/api/webhook/ha </strong>
                                            dans le champ <strong>Mon URL de callback</strong> et enregister.
                                            <img src="/img/HA-help-4.png" alt="" className="img-fluid" style={{objectFit: "contain"}}/></li>
                                        <li><strong>Copier-coller le nom exacte des tarifs</strong> <em>-sépare par des point-virgules-</em> qui donneront
                                            lieux à une inscription automatique. Tous ces tarifs doivent impérativement demander le numéro de licence
                                            en champs obligatoire. Pour ce faire, lors de la configuration de votre billetterie à l'étape n°3,
                                            cliquer sur <strong>+ Ajouter une information</strong>, saisissez l'intituler exact suivant
                                            <strong> Numéro de licence</strong>, dans <strong>Type de réponse souhaitée</strong> rentrer Nombre,
                                            sélectionner les tarifs entrés plus précédemment et rendre l'information obligatoire.
                                            <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><strong>Copier-coller l'url de votre billetterie</strong> dans le champs si dessous. Il devrais avoir la forme suivante:
                                        <em> https://www.helloasso.com/associations/&lt;nom-asso-sur-helloasso&gt;/evenements/&lt;nom-billetterie&gt;</em></li>
                                    </ul>
                                </span>

                                    <TextField name="helloassoUrl" text="Url de la billetterie HelloAsso" 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="Tarifs HelloAsso"
                                               value={data.data3 || ""} required={false}
                                               placeholder="Tarif1;Tarif2;Tarif3"/>

                                    <TextField name="data4" text="Email de réception des inscriptions échoué"
                                               value={data.data4 || ""} required={false}/>
                                    <small>Si pour une raison quelconque l'inscription automatique échoue, un email sera envoyé à cette adresse pour
                                        vous en informer</small>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </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>
}
