import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
import {apiAxios, getToastMessage} from "../../../utils/Tools.js";
import {toast} from "react-toastify";
import {useFetch} from "../../../hooks/useFetch.js";
import {CheckField} from "../../../components/MemberCustomFiels.jsx";
import {AxiosError} from "../../../components/AxiosError.jsx";
import {useTranslation} from "react-i18next";

export function PremForm({userData}) {
    const setLoading = useLoadingSwitcher()
    const {t} = useTranslation();

    const handleSubmitPerm = (event) => {
        event.preventDefault();
        setLoading(1)

        const formData = new FormData();
        formData.append("federation_admin", event.target.federation_admin?.checked);
        formData.append("safca_user", event.target.safca_user?.checked);
        formData.append("create_compet", event.target.create_compet?.checked);
        formData.append("safca_super_admin", event.target.safca_super_admin?.checked);

        toast.promise(
            apiAxios.put(`/compte/${userData.userId}/roles`, formData, {
                headers: {
                    'Accept': '*/*',
                    'Content-Type': 'form-data',
                }
            }), getToastMessage("membre.toast.perm")
        ).finally(() => {
            if (setLoading)
                setLoading(0)
        })
    }

    return <form onSubmit={handleSubmitPerm}>
        <div className="card mb-4">
            <div className="card-header">{t('permission')}</div>
            <div className="card-body">
                <div className="row g-3">
                    {userData.userId
                        ? <PremFormContent userData={userData}/>
                        : <div className="col">
                            <div className="input-group mb-3">
                                <div>{t('membre.noAccount')}</div>
                            </div>
                        </div>
                    }
                </div>
                <div className="row">
                    <div className="d-grid gap-2 d-md-flex justify-content-md-end">
                        {userData.userId && <button type="submit" className="btn btn-primary">{t('button.enregistrer')}</button>}
                    </div>
                </div>
            </div>
        </div>
    </form>
}

function PremFormContent({userData}) {
    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/compte/${userData.userId}/roles`, setLoading, 1)
    const {t} = useTranslation();

    return <>
        <div className="col">
            <h5>{t('perm.ffsafIntra')}</h5>
            {data
                ? <>
                    <CheckField name="federation_admin" text={t('perm.administrateurDeLaFédération')}
                                value={data.includes("federation_admin")}/>
                    <CheckField name="create_compet" text={t('perm.créerDesCompétion')}
                                value={data.includes("create_compet")}/>
                </>
                : error && <AxiosError error={error}/>}
        </div>
        <div className="col">
            <h5>SAFCA</h5>
            {data
                ? <>
                    <CheckField name="safca_user" text="Accès à l'application" value={data.includes("safca_user")}/>
                    <CheckField name="safca_super_admin" text="Super administrateur"
                                value={data.includes("safca_super_admin")}/>
                </>
                : error && <AxiosError error={error}/>}
        </div>
    </>
}
