import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
import {useFetch} from "../../../hooks/useFetch.js";
import {useState} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faEye, faFilePdf} from "@fortawesome/free-solid-svg-icons";
import {AxiosError} from "../../../components/AxiosError.jsx";
import {apiAxios} from "../../../utils/Tools.js";
import {useNavigate} from "react-router-dom";
import {useTranslation} from "react-i18next";

const vite_url = import.meta.env.VITE_URL;

export function AffiliationCard({clubData}) {
    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/affiliation/${clubData.id}`, setLoading, 1)
    const {t} = useTranslation();
    const [modalAffiliation, setModal] = useState({id: 0, club: clubData.id})

    return <div className="card mb-4">
        <div className="card-header container-fluid">
            <div className="row">
                <div className="col">{t('affiliation')}</div>
                <div className="col" style={{textAlign: 'right'}}>
                    <button className="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#RenewModal">{t('renouveler')}</button>
                </div>
            </div>
        </div>
        <div className="card-body">
            <ul className="list-group">
                {data && data.sort((a, b) => b.saison - a.saison).map((affiliation, index) => {
                    return <div key={index}
                                className={"list-group-item d-flex justify-content-between align-items-start list-group-item-" +
                                    (affiliation.validate ? "success" : "warning")}>
                        <div className="me-auto">{affiliation?.saison}-{affiliation?.saison + 1}</div>
                        <button className="badge btn btn-primary rounded-pill" data-bs-toggle="modal"
                                data-bs-target="#AffiliationModal" onClick={_ => setModal(affiliation)}>
                            <FontAwesomeIcon icon={faEye}/></button>
                    </div>
                })}
                {error && <AxiosError error={error}/>}
            </ul>

            <a href={`${vite_url}/api/club/me/affiliation`} target='#'>
                <button className="btn btn-primary" type="button" id="button-addon1" style={{marginTop: '1em'}}
                        onClick={_ => null}>
                    {t('dlAff')} <FontAwesomeIcon icon={faFilePdf}></FontAwesomeIcon>
                </button>
            </a>
        </div>

        <div className="modal fade" id="AffiliationModal" tabIndex="-1" aria-labelledby="AffiliationModalLabel"
             aria-hidden="true">
            <div className="modal-dialog">
                <div className="modal-content">
                    <ModalContent affiliation={modalAffiliation}/>
                </div>
            </div>
        </div>
    </div>;
}

function ModalContent({affiliation}) {
    const navigate = useNavigate();
    const {t} = useTranslation();

    return <>
        {affiliation && <div>
            <div className="modal-header">
                <h1 className="modal-title fs-5" id="AffiliationModalLabel">{t("editionDeL'affiliation")}</h1>
                <button type="button" className="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div className="modal-body">
                <div className="input-group mb-3  justify-content-md-center">
                    <span className="input-group-text" id="basic-addon2">{affiliation.saison || 0}</span>
                    <span className="input-group-text" id="basic-addon2">-</span>
                    <span className="input-group-text" id="basic-addon2">{(affiliation.saison || 0) + 1}</span>
                </div>
                <div className="input-group mb-3  justify-content-md-center">
                    <span className="input-group-text" id="basic-addon2">{t('étatDeLaDemande')}</span>
                    {affiliation.validate ? <span className="input-group-text" id="basic-addon2">{t('validée')}</span> :
                        <>
                            <span className="input-group-text" id="basic-addon2">{t('enAttente')}</span>
                            <button type="button" className="btn btn-primary"
                                    onClick={() => navigate('/affiliation#e' + (affiliation.id * -1))}
                                    data-bs-dismiss="modal"><FontAwesomeIcon icon={faEye}/></button>
                        </>}
                </div>
            </div>
            <div className="modal-footer">
                <button type="reset" className="btn btn-secondary" data-bs-dismiss="modal">{t('button.fermer')}</button>
            </div>
        </div>
        }
    </>
}

export function BureauCard({clubData}) {
    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/club/desk/${clubData.id}`, setLoading, 1)
    const {t} = useTranslation();

    return <>
        <div className="card mb-4">
            <div className="card-header">{t('bureau')}</div>
            <div className="card-body">
                <ul className="list-group">
                    {data && data.map((d, index) => {
                        return <div key={index} className="list-group-item d-flex justify-content-between align-items-start">
                            <div className="me-auto"><small>{d.role}</small><br/>{d.lname} {d.fname}</div>
                        </div>
                    })}
                </ul>
            </div>
        </div>

        <div className="modal fade" id="RenewModal" tabIndex="-1" aria-labelledby="RenewModalLabel"
             aria-hidden="true">
            <div className="modal-dialog">
                <div className="modal-content">
                    <ModalContent2 clubData={clubData} data={data}/>
                </div>
            </div>
        </div>

        {error && <AxiosError error={error}/>}
    </>
}

function ModalContent2({clubData, data}) {
    const navigate = useNavigate();
    const {t} = useTranslation();

    const sendAffiliationRequest = (event) => {
        event.preventDefault()

        let list = []
        for (let i = 0; i < event.target.length; i++) {
            if (event.target[i].type === "checkbox") {
                if (event.target[i].checked) {
                    list.push(event.target[i].name)
                }
            }
        }

        while (list.length < 3) {
            list.push(-1)
        }

        apiAxios.get(`/club/renew/${clubData.id}?m1=${list[0]}&m2=${list[1]}&m3=${list[2]}`).then(data => {
            navigate('/affiliation#d' + encodeURI(JSON.stringify(data.data)))
        })
    }

    return <form onSubmit={sendAffiliationRequest}>
        <div className="modal-header">
            <h1 className="modal-title fs-5" id="AffiliationModalLabel">{t('renouvellementDeLaffiliation')}</h1>
            <button type="button" className="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
        </div>
        <div className="modal-body">
            <p>{t('club.aff_renew.msg')}</p>
            {data && data.map((d, index) => {
                    return <div key={index} className="input-group mb-1">
                        <div className="input-group-text">
                            <input className="form-check-input mt-0" type="checkbox" value="" aria-label={d.lname + " " + d.fname}
                                   name={d.id}/>
                        </div>
                        <span className="input-group-text">{d.role}</span>
                        <span className="input-group-text">{d.lname} {d.fname}</span>
                    </div>
                }
            )}
        </div>
        <div className="modal-footer">
            <button type="reset" className="btn btn-secondary" data-bs-dismiss="modal">{t('button.annuler')}</button>
            <button type="submit" className="btn btn-primary" data-bs-dismiss="modal">{t('button.suivant')}</button>
        </div>
    </form>
}
