import React, { useState, useRef, useEffect } from "react";
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"
import { Link as AnchorLink } from "react-scroll";
import { useLocation } from '@reach/router';
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";

const Header = ({ menu }) => {
    
    const ref = useRef(null);
    const location = useLocation();
    const [menuH, setMenuH] = useState(0);
    const [burgerMenu, setBurgerMenu] = useState(0);
    const menuGeneralClasses = "md:container max-md:w-full max-md:-mx-3 top-0 mx-auto flex items-center md:justify-between justify-center max-md:flex-col max-md:overflow-y-hidden max-md:bg-black max-md:fixed transition-all";
    const burgerGeneralClasses = "bg-white w-7 h-[3px] before:w-7 before:h-[3px] before:bg-white before:block before:relative after:w-7 after:h-[3px] after:bg-white after:block after:relative transition-all before:transition-all after:transition-all";
    const burgerActivation = () => {
        
        window.addEventListener("resize", (e) => {
            if(window.screen.width > 767) {
                setBurgerMenu(0);
                enableBodyScroll(document.body);
            }
        });

        if(burgerMenu) {
            setBurgerMenu(0);
            enableBodyScroll(document.body);
        } else {
            setBurgerMenu(1);
            disableBodyScroll(document.body);
        }
    }

    useEffect(() => {
        if(location.pathname === '/') {
            setMenuH(ref.current.scrollHeight);
        }
    }, [location.pathname]);
    return (
        <header className="bg-black h-9 flex w-full fixed top-0 z-30 max-md:justify-between max-md:px-3 max-md:items-center">
            <nav className={burgerMenu ? menuGeneralClasses + " max-md:h-screen max-md:translate-y-0" : menuGeneralClasses + " max-md:h-0 max-md:-translate-y-full"}>
                <div className="flex items-center">
                    <Link to="/" className="max-md:hidden"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-8 mr-5"/></Link>
                    <a href="tel:+79200745505" className="text-white text-xs max-md:text-xl max-md:mb-12">8 (920) 074 55-05</a>
                </div>
                {location.pathname === '/'
                    ?
                    <ul className='flex items-center max-md:flex-col'>
                        <li className="mr-12 max-md:mr-0 text-white text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
                        <li style={{'--menu-h': `${menuH + 65 }px`}} className={"mr-12 max-md:mr-0 text-white text-xs max-md:text-lg max-md:mb-3 relative [&>.drop-menu]:hover:h-[var(--menu-h)]"}>
                            <p className="cursor-pointer">Услуги</p>
                            <ul ref={ref} className="absolute flex flex-col justify-center drop-menu bg-black px-4 -left-3 h-0 overflow-hidden transition-all">
                                <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="games" smooth={true}>Бизнес-игры</AnchorLink></li>
                                <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="facilitations" smooth={true}>Фасилитации</AnchorLink></li>
                                <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="teambuilding" smooth={true}>Тимбилдинг</AnchorLink></li>
                                <li className="mr-0"><AnchorLink className="cursor-pointer" to="legosp" smooth={true}>Lego SP</AnchorLink></li>
                            </ul>
                        </li>
                        <li className="mr-12 max-md:mr-0 text-white text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></li>
                        <li className="text-white text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
                    </ul>
                    :
                    <ul className='flex items-center last:[&>li]:mr-0'>
                        <li className="mr-12 max-md:mr-0 text-white text-xs max-md:text-lg max-md:mb-3"><Link to="/">Главная</Link></li>
                        {menu.map(item=>
                            <li key={item.id} className="mr-12 max-md:mr-0 text-white text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
                        )}
                    </ul>
                }
            </nav>
            <div className="md:hidden">
                <a href="tel:+79200745505" className="text-white text-md">8 (920) 074 55-05</a>
            </div>
            <div className="md:hidden cursor-pointer" role="presentation" onClick={e=> burgerActivation()} onKeyDown={e=> this.handleKeyDown}>
                <div className={burgerMenu ? burgerGeneralClasses + ' before:rotate-45 before:top-0 after:-rotate-45 after:bottom-[3px]' : burgerGeneralClasses + ' before:top-[7px] after:bottom-[10px]'}></div>
            </div>
        </header>
    )
}

export default Header