import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
import {apiAxios} 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";

export function PremForm({userData}) {
    const setLoading = useLoadingSwitcher()
    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);

        apiAxios.put(`/compte/${userData.userId}/roles`, formData, {
            headers: {
                'Accept': '*/*',
                'Content-Type': 'form-data',
            }
        }).then(_ => {
            toast.success('Permission mise à jours avec succès 🎉');
        }).catch(e => {
            console.log(e.response)
            toast.error('Échec de la mise à jours des permissions 😕 (code: ' + e.response.status + ')');
        }).finally(() => {
            if (setLoading)
                setLoading(0)
        })
    }

    return <form onSubmit={handleSubmitPerm}>
        <div className="card mb-4">
            <div className="card-header">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>Ce membre ne dispose pas de compte...</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">Enregistrer</button>}
                    </div>
                </div>
            </div>
        </div>
    </form>
}

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

    return <>
        <div className="col">
            <h5>FFSAF intra</h5>
            {data
                ? <>
                    <CheckField name="federation_admin" text="Administrateur de la fédération"
                                value={data.includes("federation_admin")}/>
                    <CheckField name="create_compet" text="Créer des compé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>
    </>
}
