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 {PremForm} from "./PremForm.jsx";
import {InformationForm} from "./InformationForm.jsx";
import {LicenceCard} from "./LicenceCard.jsx";
import {toast} from "react-toastify";
import {apiAxios, errFormater, getToastMessage} from "../../../utils/Tools.js";
import {ConfirmDialog} from "../../../components/ConfirmDialog.jsx";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faFilePdf} from "@fortawesome/free-solid-svg-icons";
import {SelectCard} from "./SelectCard.jsx";
import {useTranslation} from "react-i18next";

const vite_url = import.meta.env.VITE_URL;

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

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

    const handleRm = () => {
        toast.promise(
            apiAxios.delete(`/member/${id}`), getToastMessage("membre.toast.del")
        ).then(_ => {
            navigate(-1)
        })
    }

    return <>
        <h2>{t('pageMembre')}</h2>
        <button type="button" className="btn btn-link" onClick={() => navigate(-1)}>
            {t('back')}
        </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}/>
                        <LoadingProvider><PremForm userData={data}/></LoadingProvider>
                        <div className="row">
                            <div className="col-md-6">
                                <LoadingProvider><LicenceCard userData={data}/></LoadingProvider>
                            </div>
                            <div className="col-md-6">
                                <LoadingProvider><SelectCard userData={data}/></LoadingProvider>
                            </div>
                        </div>
                        <div className="col" style={{textAlign: 'right', marginTop: '1em'}}>
                            <button className="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#confirm-delete">{t('supprimerLeCompte')}
                            </button>
                        </div>
                        <ConfirmDialog title={t('supprimerLeCompte')} message={t('supprimerLeCompte.msg')}
                                       onConfirm={handleRm}/>
                    </div>
                </div>
            </div>
            : error && <AxiosError error={error}/>
        }
    </>
}

function PhotoCard({data}) {
    const {t} = useTranslation();

    return <div className="card mb-4">
        <div className="card-header">{data.licence ? t('licenceNo', {no: data.licence}) : t('pasDeLicence')}</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('téléchargéeLaLicence')} <FontAwesomeIcon icon={faFilePdf}></FontAwesomeIcon>
                </button>
            </a>
        </div>
    </div>;
}