import Button from "../ui/button/button.jsx";
import Modal from "../ui/modal/modal.jsx";
import { useState, useEffect } from "react";
import styles from "./manageMember.module.css"
import DeleteMemberBtn from "./deleteMember/deleteMemberBtn.jsx";
import getRoles from "../../utils/getRoles.js"
import modifyRole from "../../utils/users/modifyRole.js";

export default function ManageMember({ user }) {

    const [open, setOpen] = useState(false);
    const [roles, setRoles] = useState([]);
    const [selectedRole, setSelectedRole] = useState(3);

    useEffect(() => {
        if (!open) return;

        getRoles().then(data => {
            if (data) setRoles(data);
        });
    }, [open]);

    const handleRoleUpdate = async () => {
        const res = await modifyRole(selectedRole, user.id);
        console.log(res);
    };

    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 ${user.name}`}>

            <div className={styles.manageSection}>
                <h3>Supprimer le compte</h3>
                <DeleteMemberBtn name={user.name} id={user.id} className={styles.manageBlockContent} />
            </div>

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

                <div className={`${styles.manageBlockContent} ${styles.modifyRole}`}>
                    <select
                        value={selectedRole}
                        onChange={(e) => setSelectedRole(e.target.value)}
                        className={styles.select}
                    >
                        {roles.map((role, index) => (
                            <option key={index} value={index+1}>
                                {role}
                            </option>
                        ))}
                    </select>

                    <Button onClick={handleRoleUpdate} variant={"default"}>
                        Enregistrer
                    </Button>
                </div>
            </div>
        </Modal>
    </>
}