import {useNavigate} from "react-router-dom";
import {useLoadingSwitcher} from "../../hooks/useLoading.jsx";
import {useFetch} from "../../hooks/useFetch.js";
import {AxiosError} from "../../components/AxiosError.jsx";
import {ThreeDots} from "react-loader-spinner";
import {useAuth} from "../../hooks/useAuth.jsx";
import {useTranslation} from "react-i18next";
import i18n from "i18next";


export function CompetitionList() {
    const navigate = useNavigate();
    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/competition/all`, setLoading, 1)


    return <>
        <div>
            <div className="row">
                {data
                    ? <MakeCentralPanel data={data} navigate={navigate}/>
                    : error
                        ? <AxiosError error={error}/>
                        : <Def/>
                }
            </div>
        </div>
    </>
}

function MakeCentralPanel({data, navigate}) {
    const {userinfo} = useAuth()
    const {t} = useTranslation();

    return <>
        {userinfo?.roles?.includes("create_compet") &&
            <div className="col mb-2" style={{textAlign: 'right', marginTop: '1em'}}>
                <button type="button" className="btn btn-primary" onClick={() => navigate("/competition/0")}>{t('comp.nouvelleCompétition')}</button>
            </div>}
        <div className="mb-4">
            <h3>{t('comp.compétitionFuture')}</h3>
            <div className="list-group">
                {data.filter(req => new Date(req.toDate.split('T')[0]) >= new Date()).sort((a, b) => {
                    return new Date(a.date.split('T')[0]) - new Date(b.date.split(')T')[0])
                }).map(req => (<MakeRow key={req.id} data={req} navigate={navigate}/>))}
            </div>
        </div>
        <div className="mb-4">
            <h3>{t('comp.compétitionPassée')}</h3>
            <div className="list-group">
                {data.filter(req => new Date(req.toDate.split('T')[0]) < new Date()).sort((a, b) => {
                    return new Date(b.date.split('T')[0]) - new Date(a.date.split(')T')[0])
                }).map(req => (<MakeRow key={req.id} data={req} navigate={navigate}/>))}
            </div>
        </div>
    </>
}

const inscText = (type) => {
    if (type === "FREE") {
        return i18n.t('comp.inscriptionsLibres')
    } else if (type === "CLUB_ADMIN") {
        return i18n.t('comp.inscriptionsParLesResponsablesDeClub')
    } else if (type === "ADMIN") {
        return i18n.t('comp.inscriptionsParLesAdministrateursDeLaCompétition')
    } else if (type === "HELLOASSO") {
        return i18n.t('comp.inscriptionsSurLaBilletterieHelloasso')
    }

    return ""
}

function MakeRow({data, navigate}) {
    const {t} = useTranslation();
    return <div className="list-group-item list-group-item-action"
                onClick={() => data.canEdit ? navigate("" + data.id) : navigate("" + data.id + "/view")}>
        <div className="row justify-content-between align-items-start ">
            <div className="ms-2 col-auto">
                <div><strong>{data.name}</strong> <small>{t('par')} {data.clubName}</small></div>
                <small>{t('du')} {new Date(data.date.split('T')[0]).toLocaleDateString()} {t('au')} {new Date(data.toDate.split('T')[0]).toLocaleDateString()}</small>
            </div>
            <div className="ms-2 col-auto">
                <small style={{textAlign: 'right'}}>{inscText(data.registerMode)}</small>
            </div>
        </div>
    </div>
}

function Def() {
    return <div className="list-group">
        <li className="list-group-item"><ThreeDots/></li>
        <li className="list-group-item"><ThreeDots/></li>
        <li className="list-group-item"><ThreeDots/></li>
        <li className="list-group-item"><ThreeDots/></li>
        <li className="list-group-item"><ThreeDots/></li>
    </div>
}
