import {toast} from "react-toastify";
import {apiAxios, errFormater} 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}) {

    const creatAccount = () => {
        toast.promise(
            apiAxios.put(`/compte/${userData.id}/init`),
            {
                pending: 'Création du compte en cours',
                success: 'Compte créé avec succès 🎉',
                error: {
                    render({data}) {
                        return errFormater(data, "Échec de la création du compte")
                    }
                }
            }
        )
    }
    const sendId = (event) => {
        event.preventDefault();

        toast.promise(
            apiAxios.put(`/compte/${userData.id}/setUUID/${event.target.uuid?.value}`),
            {
                pending: "Définition de l'identifient en cours",
                success: "Identifient défini avec succès 🎉",
                error: {
                    render({data}) {
                        return errFormater(data, "Échec de la définition de l'identifient")
                    }
                }
            }
        )
    }

    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">
                    Compte
                </div>
                <ul className="dropdown-menu">
                    <li>
                        <button type="button" className="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#comptIdModal">Définir l'id du compte
                        </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>Ce membre ne dispose pas de compte...</div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="input-group mb-3">
                            <button className="btn btn-primary" onClick={creatAccount}>Initialiser le compte</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">Entré l'UUID du compte</h1>
                            <button type="button" className="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                            <h5>Attention ne changée l'id d'un membre que si vous êtes sûr de ce que vos faites...</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">Appliquer</button>
                            <button type="reset" className="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                        </div>
                    </form>
                </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}/>
        } </>
}
