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

import '../Css/Navbar.css'

import logo from '../../../Images/logo.png'

function Navbar() {
    const location = useLocation();
    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><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-upload"
                    >
                        <span />
                        <span />
                        <span />
                    </button>
                </nav>
            </header>
            <div
                id="mobile-nav-upload"
                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">
                    <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
