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';

const Header = ({ siteTitle, menu }) => {
    
    const ref = useRef(null);
    const location = useLocation();
    const [menuH, setMenuH] = useState(0);
    useEffect(() => {
        if(location.pathname === '/') {
            setMenuH(ref.current.scrollHeight);
        }
    }, []);
    
    return (
        <header className="bg-black h-9 flex w-full fixed top-0 z-30">
            <nav className="container mx-auto flex items-center justify-between">
                <div className="flex items-center">
                    <Link to="/"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-8 mr-5"/></Link>
                    <a href="tel:+79200745505" className="text-white text-xs">8 (920) 074 55-05</a>
                </div>
                {location.pathname === '/'
                    ?
                    <ul className='flex items-center'>
                        <li className="mr-12 text-white text-xs"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
                        <li style={{'--menu-h': `${menuH + 65 }px`}} className={"mr-12 text-white text-xs 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="courses" smooth={true}>Курсы</AnchorLink></li>
                            </ul>
                        </li>
                        <li className="mr-12 text-white text-xs"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></li>
                        <li className="text-white text-xs"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
                    </ul>
                    :
                    <ul className='flex items-center last:[&>li]:mr-0'>
                        <li className="mr-12 text-white text-xs"><Link to="/">Главная</Link></li>
                        {menu.map(item=>
                            <li key={item.id} className="mr-12 text-white text-xs"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
                        )}
                    </ul>
                }
                
            </nav>
        </header>
    )
}

export default Header
