import React, { useState, useRef, useEffect } from "react";
import { Link } from "gatsby"
import { Link as AnchorLink } from "react-scroll";
import { useLocation } from '@reach/router';
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
import { BsWhatsapp } from "@react-icons/all-files/bs/BsWhatsapp";
import { BsTelegram } from "@react-icons/all-files/bs/BsTelegram";


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);
        }
    }

    const menuHandler = () => {
        if(burgerMenu) {
            setBurgerMenu(0);
            enableBodyScroll(document.body);
        }
    }

    useEffect(() => {
        if(location.pathname === '/') {
            setMenuH(ref.current.scrollHeight);
        }
    }, [menu]); //eslint-disable-line
    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 max-md:mb-12 max-md:flex-col" itemScope itemType="https://schema.org/Organization">
                    <meta itemProp="name" content="Talent Team"/>
                    <div className="hidden" itemProp="address" itemScope itemType="https://schema.org/PostalAddress">
                        <meta itemProp="streetAddress" content="Льва Толстого, 16"/>
                        <meta itemProp="addressLocality" content="Москва"/>
                    </div>
                    <div className="flex items-center max-md:mb-3">
                        <a href="https://wa.me/+79200745505" target="_blank" rel="noreferrer" aria-label="WhatsApp"><BsWhatsapp className="text-white text-lg max-md:text-xl mr-2"/></a>
                        <a href="https://t.me/+79200745505" target="_blank" rel="noreferrer" aria-label="Telegram"><BsTelegram className="text-white text-lg max-md:text-xl mr-5 max-md:mr-0"/></a>
                    </div>
                    <a itemProp="telephone" href="tel:+79200745505" className="text-white hover:text-gray-400 transition-colors text-xs max-md:text-xl">8 (920) 074 55-05</a>
                </div>
                {menu === 'default'
                    ?
                    <ul className='flex items-center max-md:flex-col' itemScope itemType="https://schema.org/SiteNavigationElement">
                        <li className="mr-12 max-md:mr-0 text-white hover:text-gray-400 transition-colors text-xs max-md:text-lg max-md:mb-3" itemProp="name"><AnchorLink itemProp="url" className="cursor-pointer" to="about" smooth={true} onClick={e=> menuHandler()}>О компании</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 hover:text-gray-400 transition-colors" itemProp="name"><AnchorLink itemProp="url" className="cursor-pointer" to="games" smooth={true} onClick={e=> menuHandler()}>Бизнес-игры</AnchorLink></li>
                                <li className="mr-0 mb-2 hover:text-gray-400 transition-colors" itemProp="name"><AnchorLink itemProp="url" className="cursor-pointer" to="facilitations" smooth={true} onClick={e=> menuHandler()}>Фасилитации</AnchorLink></li>
                                <li className="mr-0 mb-2 hover:text-gray-400 transition-colors" itemProp="name"><AnchorLink itemProp="url" className="cursor-pointer" to="teambuilding" smooth={true} onClick={e=> menuHandler()}>Тимбилдинг</AnchorLink></li>
                                <li className="mr-0 hover:text-gray-400 transition-colors" itemProp="name"><AnchorLink itemProp="url" className="cursor-pointer" to="legosp" smooth={true} onClick={e=> menuHandler()}>Lego SP</AnchorLink></li>
                            </ul>
                        </li>
                        <li className="mr-12 max-md:mr-0 text-white hover:text-gray-400 transition-colors text-xs max-md:text-lg max-md:mb-3" itemProp="name"><AnchorLink itemProp="url" className="cursor-pointer" to="team" smooth={true} onClick={e=> menuHandler()}>Наша команда</AnchorLink></li>
                        <li className="text-white hover:text-gray-400 transition-colors text-xs max-md:text-lg max-md:mb-3" itemProp="name"><AnchorLink itemProp="url" className="cursor-pointer" to="contacts" smooth={true} onClick={e=> menuHandler()}>Контакты</AnchorLink></li>
                    </ul>
                    :
                    <ul className='flex items-center max-md:flex-col last:[&>li]:mr-0' itemScope itemType="https://schema.org/SiteNavigationElement">
                        <li className="mr-12 max-md:mr-0 max-lg:mr-5 text-white hover:text-gray-400 transition-colors text-xs max-md:text-lg max-md:mb-3" itemProp="name"><Link itemProp="url" to="/">Главная</Link></li>
                        {menu.map(item=>
                            <li key={item.id} className="mr-12 max-md:mr-0 max-lg:mr-5 text-white hover:text-gray-400 transition-colors text-xs max-md:text-lg max-md:mb-3" itemProp="name"><AnchorLink itemProp="url" className="cursor-pointer" to={item.to} smooth={true} onClick={e=> menuHandler()}>{item.title}</AnchorLink></li>
                        )}
                    </ul>
                }
            </nav>
            <div className="md:hidden flex" itemScope itemType="https://schema.org/Organization">
                <meta itemProp="name" content="Talent Team"/>
                <div className="hidden" itemProp="address" itemScope itemType="https://schema.org/PostalAddress">
                    <meta itemProp="streetAddress" content="Льва Толстого, 16"/>
                    <meta itemProp="addressLocality" content="Москва"/>
                </div>
                <div className="flex items-center">
                    <a href="https://wa.me/+79200745505" target="_blank" rel="noreferrer" aria-label="WhatsApp"><BsWhatsapp className="text-white text-lg mr-2"/></a>
                    <a href="https://t.me/+79200745505" target="_blank" rel="noreferrer" aria-label="Telegram"><BsTelegram className="text-white text-lg mr-3"/></a>
                </div>
                <a itemProp="telephone" href="tel:+79200745505" className="text-white hover:text-gray-400 transition-colors 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
