import {toast} from "react-toastify";
import {apiAxios} from "../../../utils/Tools.js";
import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
import {useFetch} from "../../../hooks/useFetch.js";
import {ColoredCircle} from "../../../components/ColoredCircle.jsx";
import {AxiosError} from "../../../components/AxiosError.jsx";

export function CompteInfo({userData}) {

    return <div className="card mb-4">
        <div className="card-header">Compte</div>
        <div className="card-body text-center">
            {userData.userId
                ? <CompteInfoContent userData={userData}/>
                :
                <>
                    <div className="row">
                        <div className="input-group mb-3">
                            <div>Ce membre ne dispose pas de compte... <br/>
                                Un compte sera créé par la fédération lors de la validation de sa première licence
                            </div>
                        </div>
                    </div>
                </>
            }
        </div>
    </div>
}

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

    return <>
        {data
            ? <>
                <div className="row">
                    <div className="input-group mb-3">
                        <div>Identifiant: {data.login}</div>
                    </div>
                </div>
                <div className="row">
                    <div className="input-group mb-3">
                        <div>Activer: <ColoredCircle boolean={data.enabled}/></div>
                    </div>
                </div>
                <div className="row">
                    <div className="input-group mb-3">
                        <div>Email vérifié: <ColoredCircle boolean={data.emailVerified}/></div>
                    </div>
                </div>
            </>
            : error && <AxiosError error={error}/>
        } </>
}
