import {Outlet} from "react-router-dom";
import {LoadingProvider} from "../../hooks/useLoading.jsx";
import {MemberPage} from "./member/MemberPage.jsx";
import {useAuth} from "../../hooks/useAuth.jsx";
import {MemberList} from "../MemberList.jsx";
import {NewMemberPage} from "./member/NewMemberPage.jsx";
import {MyClubPage} from "./club/MyClubPage.jsx";
import {PayAndValidateList} from "../PayAndValidateList.jsx";
import {PaymentError} from "./PaymentError.jsx";
import {PaymentReturn} from "./PaymentReturn.jsx";
import {useTranslation} from "react-i18next";

export function ClubRoot() {
    const {userinfo} = useAuth()
    const {t} = useTranslation();

    let club = ""
    if (userinfo?.groups) {
        for (let group of userinfo.groups) {
            if (group.startsWith("/club/")) {
                club = group.slice(group.indexOf("-") + 1)
                break
            }
        }
    }

    return <>
        <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}>
            <h3 style={{marginLeft: '0.75em'}}>{t("club", {count: 1})}: {club}</h3></div>
        <LoadingProvider>
            <Outlet/>
        </LoadingProvider>
    </>
}

export function getClubChildren() {
    return [
        {
            path: 'member',
            element: <MemberList source="club"/>
        },
        {
            path: 'member/pay',
            element: <PayAndValidateList source="club"/>
        },
        {
            path: 'member/pay/error',
            element: <PaymentError/>
        },
        {
            path: 'member/pay/return',
            element: <PaymentReturn/>
        },
        {
            path: 'member/:id',
            element: <MemberPage/>
        },
        {
            path: 'member/new',
            element: <NewMemberPage/>
        },
        {
            path: 'me',
            element: <MyClubPage/>
        }
    ]
}
