import {toast} from "react-toastify";
import {apiAxios, getToastMessage} 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";
import {useTranslation} from "react-i18next";

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

    const creatAccount = () => {
        toast.promise(apiAxios.put(`/compte/${userData.id}/init`), getToastMessage("membre.toast.compte"))
    }
    const sendId = (event) => {
        event.preventDefault();
        toast.promise(apiAxios.put(`/compte/${userData.id}/setUUID/${event.target.uuid?.value}`), getToastMessage("membre.toast.id"))
    }

    return <div className="card mb-4">
        <div className="card-header">
            <div className="btn-group dropend">
                <div className="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    {t('compte')}
                </div>
                <ul className="dropdown-menu">
                    <li>
                        <button type="button" className="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#comptIdModal">{t('définirLidDuCompte')}
                        </button>
                    </li>
                </ul>
            </div>
        </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')}</div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="input-group mb-3">
                            <button className="btn btn-primary" onClick={creatAccount}>{t('membre.initaccount')}</button>
                        </div>
                    </div>
                </>
            }
        </div>
        <div className="modal fade" id="comptIdModal" tabIndex="-1" aria-labelledby="comptIdModalLabel"
             aria-hidden="true">
            <div className="modal-dialog">
                <div className="modal-content">
                    <form onSubmit={sendId}>
                        <div className="modal-header">
                            <h1 className="modal-title fs-5" id="comptIdModalLabel">{t('membre.initaccount.text1')}</h1>
                            <button type="button" className="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                            <h5>{t('membre.initaccount.text2')}</h5>
                            <input type="text" className="form-control" placeholder="uuid" name="uuid"
                                   defaultValue={userData.userId}/>
                        </div>
                        <div className="modal-footer">
                            <button type="submit" className="btn btn-primary" data-bs-dismiss="modal">{t('button.appliquer')}</button>
                            <button type="reset" className="btn btn-secondary" data-bs-dismiss="modal">{t('button.fermer')}</button>
                        </div>
                    </form>
                </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}/>
        } </>
}
