ffsaf-site/src/main/webapp/src/pages/MePage.jsx

import {LoadingProvider, useLoadingSwitcher} from "../hooks/useLoading.jsx";
import {AxiosError} from "../components/AxiosError.jsx";
import {useFetch} from "../hooks/useFetch.js";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {
    faCalendarDay,
    faEnvelope, faFilePdf, faFlag,
    faInfoCircle,
    faMars,
    faMarsAndVenus,
    faUser,
    faUserGroup,
    faVenus
} from "@fortawesome/free-solid-svg-icons";

const vite_url = import.meta.env.VITE_URL;

export function MePage() {
    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/member/me`, setLoading, 1)

    return <div>
        <h1>Mon espace</h1>

        {data
            ? <div>
                <div className="row">
                    <div className="col-lg-4">
                        <PhotoCard data={data}/>
                    </div>
                    <div className="col-lg-8">
                        <InformationForm data={data}/>
                        <div className="row">
                            <div className="col-md-6">
                                <LoadingProvider><LicenceCard userData={data}/></LoadingProvider>
                            </div>
                            <div className="col-md-6">
                                <LoadingProvider><SelectCard/></LoadingProvider>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            : error && <AxiosError error={error}/>
        }
    </div>
}

export function LicenceCard({userData}) {
    return <div className="card mb-4 mb-md-0">
        <div className="card-header container-fluid">
            <div className="row">
                <div className="col">Licence</div>
            </div>
        </div>
        <div className="card-body">
            <ul className="list-group">
                {userData.licences.map((licence, index) => {
                    return <div key={index}
                                className={"list-group-item d-flex justify-content-between align-items-start list-group-item-" +
                                    (licence.validate ? "success" : (licence.certificate ? "warning" : "danger"))}>
                        <div className="me-auto">{licence?.saison}-{licence?.saison + 1}</div>
                    </div>
                })}
            </ul>
        </div>
    </div>;
}

function PhotoCard({data}) {
    return <div className="card mb-4">
        <div className="card-header">Licence n°{data.licence}</div>
        <div className="card-body text-center">
            <div className="input-group mb-3">
                <img
                    src={`${vite_url}/api/member/me/photo`}
                    alt="avatar"
                    className="rounded-circle img-fluid" style={{object_fit: 'contain'}}/>
            </div>

            <a href={`${vite_url}/api/member/me/licence`} target='#'>
                <button className="btn btn-primary" type="button" id="button-addon1"
                        onClick={e => null}>
                    Téléchargée la licence <FontAwesomeIcon icon={faFilePdf}></FontAwesomeIcon>
                </button>
            </a>
        </div>
    </div>;
}

function SelectCard() {
    return <div className="card mb-4 mb-md-0">
        <div className="card-header">Sélection en équipe de France</div>
        <div className="card-body">
        </div>
    </div>;
}


export function InformationForm({data}) {
    const style = {marginRight: '0.7em'}

    return <div className="card mb-4">
        <div className="card-header">Information</div>
        <div className="card-body">
            <div className="row mb-2">
                <p>
                    <FontAwesomeIcon icon={faUser} style={style}/>{data.lname} {data.fname}<br/>
                    <FontAwesomeIcon icon={faEnvelope} style={style}/>{data.email}<br/>
                    {data.genre === 'Homme' && <FontAwesomeIcon icon={faMars} style={style}/>
                        || data.genre === 'Femme' && <FontAwesomeIcon icon={faVenus} style={style}/>
                        || <FontAwesomeIcon icon={faMarsAndVenus} style={style}/>}{data.genre}<br/>
                    <FontAwesomeIcon icon={faCalendarDay} style={style}/>{data.birth_date ? data.birth_date.split('T')[0] : ''}<br/>
                    <FontAwesomeIcon icon={faUserGroup} style={style}/>{data.categorie}<br/>
                    <FontAwesomeIcon icon={faFlag} style={style}/>Nationalité : <img src={"/flags/flags_" + data.country.toLowerCase() + ".png"}
                                                                                     alt=""/><br/>
                    <FontAwesomeIcon icon={faInfoCircle} style={style}/>Club : {data.club}<br/>
                    <FontAwesomeIcon icon={faInfoCircle} style={style}/>Rôle au sien du club : {data.role}<br/>
                    <FontAwesomeIcon icon={faInfoCircle} style={style}/>Formation d'arbitrage : {data.grade_arbitrage}
                </p>
                <div>
                    <button className="btn btn-primary" type="button" id="button-addon1"
                            onClick={_ => window.location.href = "https://auth.ffsaf.fr/realms/ffsaf/login-actions/reset-credentials?client_id=ffsaf-client"}>
                        Changer mon mot de passe
                    </button>
                </div>
            </div>
        </div>
    </div>;
}