import {AxiosError} from "../../../components/AxiosError.jsx";
import {useNavigate} from "react-router-dom";
import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
import {useFetch} from "../../../hooks/useFetch.js";
import {ThreeDots} from "react-loader-spinner";
import {useEffect, useState} from "react";
import {Checkbox} from "../../../components/MemberCustomFiels.jsx";
import {useTranslation} from "react-i18next";

export function AffiliationReqList() {
    const navigate = useNavigate();
    const {t} = useTranslation();

    const setLoading = useLoadingSwitcher()
    const {data, refresh, error} = useFetch(`/affiliation/request`, setLoading, 1)

    const [saisonFilter, setSaisonFilter] = useState(null)
    const visibleRequest = (data == null) ? [] : data.filter(e => !(saisonFilter && e.saison !== saisonFilter)).sort((a, b) => {
        if (a.saison > b.saison) return 1
        if (a.saison < b.saison) return -1
        if (a.name.toLowerCase() > b.name.toLowerCase()) return 1
        if (a.name.toLowerCase() < b.name.toLowerCase()) return -1
        return 0
    });

    return <>
        <h2>{t("nav.aff_request")}</h2>
        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/club")}>
            {t('back')}
        </button>

        <div>
            <div className="row">
                <div className="col-lg-9">
                    {data
                        ? <MakeCentralPanel data={data} visibleRequest={visibleRequest} navigate={navigate}/>
                        : error
                            ? <AxiosError error={error}/>
                            : <Def/>
                    }
                </div>
                <div className="col-lg-3">
                    <div className="card mb-4">
                        <div className="card-header">{t('filtre')}</div>
                        <div className="card-body">
                            <FiltreBar data={data} saisonFilter={saisonFilter} setSaisonFilter={setSaisonFilter}/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </>
}

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

    return <>
        <div className="mb-4">
            <small>{t("page_info_ligne", {show: visibleRequest.length, total: data.length})}</small>
            <div className="list-group">
                {visibleRequest.map(req => (<MakeRow key={req.id} request={req} navigate={navigate}/>))}
            </div>
        </div>
    </>
}

function MakeRow({request, navigate}) {
    return <div className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
                onClick={() => navigate("" + request.id)}>
        <div className="ms-2 col-auto">
            <div className="fw-bold">{request.name}</div>
        </div>
        <small style={{textAlign: 'right'}}>{request.saison}-{request.saison + 1}<br/>{request.state_id}</small>
    </div>
}

let allSaison = []

function FiltreBar({data, saisonFilter, setSaisonFilter}) {
    const {t} = useTranslation();

    useEffect(() => {
        if (!data)
            return;
        allSaison.push(...data.map((e) => e.saison))
        allSaison = allSaison.filter((value, index, self) => self.indexOf(value) === index).filter(value => value != null).sort()
    }, [data]);

    return <div>
        <div className="mb-3">
            <select className="form-select" value={String(saisonFilter)} onChange={event => setSaisonFilter(Number(event.target.value))}>
                <option value="">{t('all_season')}</option>
                {allSaison && allSaison.map((value, index) => {
                    return <option key={index} value={value}>{value}-{value+1}</option>
                })
                }
            </select>
        </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>
}
