import styles from "./styles.module.css";
import { Link, NavLink } from "react-router";
import { useEffect, useState } from "react";
import { LuPanelLeftClose, LuPanelLeftOpen, LuTvMinimalPlay } from "react-icons/lu";
import { LuGraduationCap } from "react-icons/lu";
import { LuUsers } from "react-icons/lu";
import { LuMail } from "react-icons/lu";
import { LuLayoutDashboard } from "react-icons/lu";
import { LuLogOut } from "react-icons/lu";
import { useGetCurrentUser } from "../../hooks/useGetCurrentUser";

export default function Sidebar() {

    const { getCurrentUser } = useGetCurrentUser();
    const [role, setRole] = useState(0);
    const [sideMenu, setSideMenu] = useState(true);

    useEffect(() => {
        const fetchCurrentUser = async () => {
            const currentUser = await getCurrentUser();
            setRole(currentUser.data.role_id);
        };
        fetchCurrentUser();
    }, []);
    
    return sideMenu ? (
        <aside className={styles.sidebar}>
            <div className="d-flex">
                <Link className={`${styles.logoLink} justify-content-center mx-auto`} to="/dashboard">
                    <img className={styles.logo} src="/src/assets/logo.png" alt="Logo" />
                </Link>

                <button type="button" className={`${styles.sidebarClose} align-items-center justify-content-center`} onClick={() => setSideMenu(false)} style={{ position: 'absolute', left: '280px', top: '8px' }}> <LuPanelLeftClose size={30} /> </button>
            </div>

            <nav className={`${styles.nav}`}>
            {role === 1 ? (
                <ul className={styles.navList}>
                    <li className={`${styles.navItem} text-start`}>
                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/dashboard"> <LuLayoutDashboard className="me-2" size={24} /> {sideMenu ? "Dashboard" : ""} </NavLink>
                    </li>
                    <li className={`${styles.navItem} text-start`}>
                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/videos"> <LuTvMinimalPlay className="me-2" size={24} />Videos</NavLink>
                    </li>
                    <li className={`${styles.navItem} text-start`}>
                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/workshops"> <LuGraduationCap className="me-2" size={24} /> {sideMenu ? "Workshops" : ""} </NavLink>
                    </li>
                    <li className={`${styles.navItem} text-start`}>
                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/admin/users"> <LuUsers className="me-2" size={24} /> {sideMenu ? "Utilizadores" : ""} </NavLink>
                    </li>
                    <li className={`${styles.navItem} text-start`}>
                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/contactos"> <LuMail className="me-2" size={24} /> {sideMenu ? "Contactos" : ""} </NavLink>
                    </li>
                </ul>
            ) : (
                <ul className={styles.navList}>
                    <li className={`${styles.navItem} text-start`}>
                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/dashboard"> <LuLayoutDashboard className="me-2" size={24} /> {sideMenu ? "Dashboard" : ""} </NavLink>
                    </li>
                    <li className={`${styles.navItem} text-start`}>
                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/videos"> <LuTvMinimalPlay className="me-2" size={24} />Videos</NavLink>
                    </li>
                    <li className={`${styles.navItem} text-start`}>
                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/workshops"> <LuGraduationCap className="me-2" size={24} /> {sideMenu ? "Workshops" : ""} </NavLink>
                    </li>
                    <li className={`${styles.navItem} text-start`}>
                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/contactos"> <LuMail className="me-2" size={24} /> {sideMenu ? "Contactos" : ""} </NavLink>
                    </li>
                </ul>
            )}
            </nav>

            <div className={styles.logoutWrapper}>
                <Link className={styles.logoutButton} to="/logout"> <LuLogOut className="me-2" size={24} />Logout</Link>
            </div>
        </aside>
    ) : (
        <div className={`${styles.sidebarIconsMenu}`}>
            <aside >
                <div className="d-flex px-2 mb-4 mt-2">
                    <button type="button" className={`${styles.sidebarOpen} align-items-center bg-transparent border-0 justify-content-center`} onClick={() => setSideMenu(true)}> <LuPanelLeftOpen size={30} /> </button>
                </div>

                <nav className={`${styles.nav} px-2`}>
                    <ul className={styles.navList}>
                        <li className={`${styles.navItem}`} title="Dashboard">
                            <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/dashboard"> <LuLayoutDashboard size={24} /></NavLink>
                        </li>
                        <li className={`${styles.navItem}`} title="Vídeos">
                            <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/videos"> <LuTvMinimalPlay  size={24} /></NavLink>
                        </li>
                        <li className={`${styles.navItem}`} title="Workshops">
                            <NavLink className={({ isActive }) => isActive ? `${styles.navLink} justify-content-center ${styles.navLinkActive}` : styles.navLink} to="/workshops"> <LuGraduationCap size={24} /></NavLink>
                        </li>
                        <li className={`${styles.navItem}`} title="Utilizadores">
                            <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive} justify-content-center` : styles.navLink} to="/admin/users"> <LuUsers size={24} /></NavLink>
                        </li>
                        <li className={`${styles.navItem}`} title="Contactos">
                            <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/contactos"> <LuMail size={24} /></NavLink>
                        </li>
                    </ul>
                </nav>

                <div className="d-flex align-self-end mx-2 position-absolute bottom-0 mb-2">
                    <Link className={styles.logoutButton} to="/logout" title="Logout"> <LuLogOut className="" size={24} /></Link>
                </div>
            </aside>
        </div>

    );
}