import React, { useEffect, useState } from 'react'
import { NavLink, useLocation } from 'react-router-dom'

import '../Css/Navbar.css'

import logo from '../../../Images/logo.png'
import { Lock as LockIcon } from '@mui/icons-material';

function Navbar() {
    const location = useLocation();
    const isManagementPage = location.pathname.startsWith('/manage/');
    const [menuOpen, setMenuOpen] = useState(false);

    useEffect(() => {
        setMenuOpen(false);
    }, [location.pathname]);

    const toggleMenu = () => setMenuOpen(prev => !prev);
    const closeMenu = () => setMenuOpen(false);
    
    return (
        <>
            <header>
                <div className="logo">
                    <NavLink className="logo" exact to="/">
                        <img src={logo} className="imageNav" alt="Logo" />
                        <p className="logo">Upload your Project Images</p>
                    </NavLink>
                </div>
                <nav aria-label="Hauptnavigation">
                    <ul className="nav__links">
                        <li><NavLink to="/groups" activeClassName="active">Groups</NavLink></li>
                        <li><NavLink to="/moderation" activeClassName="active"><LockIcon style={{ fontSize: 18, verticalAlign: 'text-bottom', marginRight: 6 }} aria-hidden="true" />Moderation</NavLink></li>
                        <li><NavLink className="cta" exact to="/" activeClassName="active">Upload</NavLink></li>
                        {isManagementPage && (
                            <li><NavLink className="cta" to={location.pathname} activeClassName="active">Mein Upload</NavLink></li>
                        )}
                        <li><a href="https://gitea.lan.hobbyhimmel.de/hobbyhimmel/Project-Image-Uploader" target="_blank" rel="noopener noreferrer">About</a></li>
                    </ul>
                    <button
                        type="button"
                        className={`menu${menuOpen ? ' menu--open' : ''}`}
                        onClick={toggleMenu}
                        aria-label="Navigation umschalten"
                        aria-expanded={menuOpen}
                        aria-controls="mobile-nav"
                    >
                        <span />
                        <span />
                        <span />
                    </button>
                </nav>
            </header>
            <div
                id="mobile-nav"
                className={`overlay${menuOpen ? ' overlay--active' : ''}`}
                aria-hidden={!menuOpen}
            >
                <button type="button" className="close" onClick={closeMenu} aria-label="Navigation schließen">&times;</button>
                <div className="overlay__content">
                    <NavLink to="/groups" activeClassName="active" onClick={closeMenu}>Groups</NavLink>
                    <NavLink to="/moderation" activeClassName="active" onClick={closeMenu}>
                        <LockIcon style={{ fontSize: 24, verticalAlign: 'text-bottom', marginRight: 12 }} aria-hidden="true" />Moderation
                    </NavLink>
                    <NavLink exact to="/" activeClassName="active" onClick={closeMenu}>Upload</NavLink>
                    {isManagementPage && (
                        <NavLink to={location.pathname} activeClassName="active" onClick={closeMenu}>Mein Upload</NavLink>
                    )}
                    <a href="https://gitea.lan.hobbyhimmel.de/hobbyhimmel/Project-Image-Uploader" target="_blank" rel="noopener noreferrer" onClick={closeMenu}>About</a>
                </div>
            </div>
        </>
    )
}

export default Navbar