import styles from "./Header.module.css"
import { Link, NavLink } from "react-router";
import { useEffect, useRef, useState } from "react";
import getUserNotifications from "../../utils/getUserNotifications.js";

function Header() {
    const [notificationMenu, setnotificationMenu] = useState(false);
    const [unreadNotification, setunreadNotification] = useState(true);
    const [mobileMenu, setMobileMenu] = useState(false);
    const [notifications, setNotifications] = useState([{"content" : "ok"}, {"content" : "pourquoi pas antoine"}]);
    const notificationRef = useRef(null);



    useEffect(() => {
        async function loadNotifications() {
            const notifData = await getUserNotifications();
            setNotifications(notifData || []);
        }

        //loadNotifications();
        const handleClickOutside = (event) => {
            if (
                notificationRef.current &&
                !notificationRef.current.contains(event.target) &&
                !event.target.closest(`.${styles.bellBtn}`)
            ) {
                setnotificationMenu(false);
            }
        };

        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);

    return (
        <div className={styles.headerContainer}>
            <header className={`${styles.header} glassCard`}>
                <nav className={`${mobileMenu ? styles.inactiveHeaderContent : styles.activeHeaderContent}`}>
                    <div className={styles.headerLeftContent}>
                        <NavLink className={styles.logoLink} to="/">
                            <img src="/logo.png" alt="logo" className={styles.logo} />
                        </NavLink>
                        <div className={styles.navLinks}>
                            <NavLink to="/" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                                Accueil
                            </NavLink>
                            <NavLink to="/events" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                                Evènements
                            </NavLink>
                            <NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                                Bénévoles
                            </NavLink>
                        </div>
                    </div>

                    <div className={styles.headerRightContent}>
                        <button
                            className={`${styles.bellBtn} ${notificationMenu ? styles.activeBellBtn : ""}`}
                            onClick={() => {
                                setnotificationMenu(!notificationMenu);
                                setunreadNotification(false);
                            }}
                        >
                            <img className={styles.notificationsImg} src="/bell.svg" alt="notifications"/>
                            {unreadNotification && <span className={styles.notificationBadge}></span>}
                        </button>

                        <Link to="/profile" className={styles.profileLink}>
                            <img className={styles.profileImg} src="/person.svg" alt="profile"/>
                        </Link>
                    </div>
                </nav>

                <nav className={`${mobileMenu ? styles.activeMobileMenu : styles.inactiveMobileMenu}`}>
                    <NavLink to="/" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                        Accueil
                    </NavLink>
                    <NavLink to="/events" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                        Evènements
                    </NavLink>
                    <NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                        Bénévoles
                    </NavLink>
                </nav>


                <button
                    className={`${styles.burgerBtn} ${mobileMenu ? styles.activeBurgerBtn : ""}`}
                    onClick={() => setMobileMenu(!mobileMenu)}
                >
                    <div className={styles.burgerBar}></div>
                    <div className={styles.burgerBar}></div>
                    <div className={styles.burgerBar}></div>
                </button>
            </header>




            <div
                ref={notificationRef}
                className={`${styles.notificationDiv} glassCard ${notificationMenu ? styles.activeNotificationDiv : ""}`}
            >
                {notifications.length === 0 ? (
                    <p className={styles.notification}>Vous n'avez aucune notification !</p>
                ) : (
                    notifications.map((notification, index) => (
                        <div className={styles.notification} key={index}>
                            <p>{notification.content}</p>
                            <button
                                className={styles.closeBtn}
                                onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}
                            >
                                <img src="/close.svg" alt="supprimer la notification"/>
                            </button>
                        </div>
                    ))
                )}
            </div>
        </div>
    );
}

export default Header;