import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
import {useFetch} from "../../../hooks/useFetch.js";
import {ColoredCircle} from "../../../components/ColoredCircle.jsx";
import {AxiosError} from "../../../components/AxiosError.jsx";
import {useTranslation} from "react-i18next";

export function CompteInfo({userData}) {
    const {t} = useTranslation();

    return <div className="card mb-4">
        <div className="card-header">{t('compte')}</div>
        <div className="card-body text-center">
            {userData.userId
                ? <CompteInfoContent userData={userData}/>
                :
                <>
                    <div className="row">
                        <div className="input-group mb-3">
                            <div>{t('membre.noAccount')}<br/>
                                {t('membre.noAccount.clubMsg')}
                            </div>
                        </div>
                    </div>
                </>
            }
        </div>
    </div>
}

function CompteInfoContent({userData}) {
    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/compte/${userData.userId}`, setLoading, 1)
    const {t} = useTranslation();

    return <>
        {data
            ? <>
                <div className="row">
                    <div className="input-group mb-3">
                        <div>{t('membre.identifiant')}: {data.login}</div>
                    </div>
                </div>
                <div className="row">
                    <div className="input-group mb-3">
                        <div>{t('activer')}: <ColoredCircle boolean={data.enabled}/></div>
                    </div>
                </div>
                <div className="row">
                    <div className="input-group mb-3">
                        <div>{t('membre.emailVérifié')}: <ColoredCircle boolean={data.emailVerified}/></div>
                    </div>
                </div>
            </>
            : error && <AxiosError error={error}/>
        } </>
}
