import Button from "../../../../../components/ui/button/button.tsx";
import Modal from "../../../../../components/ui/modal/modal.tsx";
import { useState } from "react";
import deactivateUser from "../../../../../utils/users/deactivateUser.js"
import { useNavigate } from "react-router";

export default function DeactivateMemberBtn({ name, id, ...props }) {

    const [open, setOpen] = useState(false);
    const navigate = useNavigate();

    const deactivateMember = async () => {
        const result = await deactivateUser(id);

        if (result.status === 200 || result.status === 204) {
            setOpen(false);
            navigate("/volunteers");
        }
    }

    return <div {...props}>
        <Button variant={"danger"} onClick={() => setOpen(true)}>Désactiver</Button>

        <Modal open={open} onClose={() => setOpen(false)} title={"Supprimer"}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 15 }}>
                <p>Etes-vous sur de vouloir désactiver le compte {name} ?</p>
                <Button variant={"danger"} onClick={deactivateMember}>Désactiver</Button>
            </div>
        </Modal>
    </div>
}