import {useNavigate, useParams} from "react-router-dom";
import {LoadingProvider, useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
import {useFetch} from "../../../hooks/useFetch.js";
import {AxiosError} from "../../../components/AxiosError.jsx";
import {CompteInfo} from "./CompteInfo.jsx";
import {InformationForm} from "./InformationForm.jsx";
import {LicenceCard} from "./LicenceCard.jsx";
import {ConfirmDialog} from "../../../components/ConfirmDialog.jsx";
import {apiAxios, errFormater} from "../../../utils/Tools.js";
import {toast} from "react-toastify";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faFilePdf} from "@fortawesome/free-solid-svg-icons";

const vite_url = import.meta.env.VITE_URL;

export function MemberPage() {
    const {id} = useParams()
    const navigate = useNavigate();

    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/member/${id}`, setLoading, 1)

    const handleRm = () => {
        toast.promise(
            apiAxios.delete(`/member/club/${id}`),
            {
                pending: "Suppression du compte en cours...",
                success: "Compte supprimé avec succès 🎉",
                error: {
                    render({data}) {
                        return errFormater(data, "Échec de la suppression du compte")
                    }
                }
            }
        ).then(_ => {
            navigate(-1)
        })
    }

    return <>
        <h2>Page membre</h2>
        <button type="button" className="btn btn-link" onClick={() => navigate(-1)}>
            &laquo; retour
        </button>
        {data
            ? <div>
                <div className="row">
                    <div className="col-lg-4">
                        <PhotoCard data={data}/>
                        <LoadingProvider><CompteInfo userData={data}/></LoadingProvider>
                    </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>
                        {data.licence == null &&
                            <div className="col" style={{textAlign: 'right', marginTop: '1em'}}>
                                <button className="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#confirm-delete">Supprimer le compte
                                </button>
                            </div>}
                        <ConfirmDialog title="Supprimer le compte" message="Êtes-vous sûr de vouloir supprimer ce compte ?"
                                       onConfirm={handleRm}/>
                    </div>
                </div>
            </div>
            : error && <AxiosError error={error}/>
        }
    </>
}

function PhotoCard({data}) {
    return <div className="card mb-4">
        <div className="card-header">{data.licence ? "Licence n°" + data.licence : "Pas de licence"}</div>
        <div className="card-body text-center">
            <div className="input-group mb-3">
                <img
                    src={`${vite_url}/api/member/${data.id}/photo`}
                    alt="avatar"
                    className="rounded-circle img-fluid" style={{object_fit: 'contain'}}/>
            </div>
            <a href={`${vite_url}/api/member/${data.id}/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 <></>
    /*return <div className="card mb-4 mb-md-0">
        <div className="card-header">Sélection en équipe de France</div>
        <div className="card-body">
            <p className="mb-1">Soon</p>

        </div>
    </div>;*/
}
