import Button from "../../../../components/ui/button/button.tsx";
import Modal from "../../../../components/ui/modal/modal.tsx";
import {useContext, useState} from "react";
import styles from "./manageMember.module.css"
import DeactivateMemberBtn from "./deactivateMember/deactivateMemberBtn.jsx";
import ModifyRole from "./modifyrole/ModifyRole.jsx";
import {AuthContext} from "../../../../contexts/auth/AuthContext.js";


export default function ManageMember({ userToManage }) {

    const { user } = useContext(AuthContext);
    const [open, setOpen] = useState(false);


    return <>
        <Button onClick={() => setOpen(true)} variant={"default"} className={styles.manageBtn}>
            <img src="/icons/tools.svg" alt="tools icon" className={styles.icon} />
            <p>Gérer</p>
        </Button>

        <Modal open={open} onClose={() => setOpen(false)} title={`Gestion de l'utilisateur ${userToManage.name}`}>

            {(user.id != userToManage.id) ? (
                <div className={styles.manageSection}>
                    <h3>Désactiver le compte</h3>
                    <DeactivateMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
                </div>
            ) : null}

            <div className={styles.manageSection}>
                <h3>Modifier le rôle</h3>
                <ModifyRole user={userToManage} />
            </div>
        </Modal>
    </>
}