import { useState, useEffect } from 'react';
import Facebook  from "../assets/icon/facebook.svg";
import Discord  from "../assets/icon/discord.svg";
import Mail  from "../assets/icon/mail.svg";
import Logo  from "../assets/img/vbytes-logo.png";

const Navbar = () => {

    const [isOpen, setIsOpen] = useState(false);
    const [scrollPosition, setScrollPosition] = useState(0);
    

    const toggleNavbar = () => {
        setIsOpen((prevState) => !prevState);
    };
    
    const handleScroll = () => {
            const position = window.pageYOffset;
            setScrollPosition(position);
        };

    useEffect(() => {
        window.addEventListener('scroll', handleScroll, { passive: true });

        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

    return (
        <nav className='nav'>
            <div className='nav__container'>
                <div className='nav__social-media'>
                    <a href='https://discord.gg/BGfqPQXT'><img src={Discord}  alt=""/></a>
                    <a href='https://www.facebook.com/groups/vbytes/'><img src={Facebook}  alt=""/></a>
                    <a href='mailto:styrelsen@vbytes.se'><img src={Mail}  alt=""/></a>
                </div>
                <a href='/'><img className={ scrollPosition < 500 ? "hidden AppLogo" : "visible AppLogo"} src={Logo} id="AppLogo" alt="logo" /></a>
                <div className="nav__menu-container">
                    <div  onClick={toggleNavbar}  className={`hamburger ${isOpen ? 'open' : ''}`}>
                        <div class="line-menu half start"></div>
                        <div class="line-menu"></div>
                        <div class="line-menu half end"></div>
                    </div>
                    <ul className={`navbar navbar-mobile ${isOpen ? 'opened' : 'closed'}`}>
                        <li><a href="/#about">Om vBytes</a></li>
                        <li><a href="/#member">Bli medlem</a></li>
                        <li><a href="/#inventory">Låna spel</a></li>
                        <li><a href="/#contact">Kontakt</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    );
};

export default Navbar;