import React, { useEffect, useState } from 'react'
import { Link } from 'gatsby'; 
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";

import Logo from "../images/logo.svg";
import { BiSearchAlt } from "@react-icons/all-files/bi/BiSearchAlt";
import { BiPhoneCall } from "@react-icons/all-files/bi/BiPhoneCall";
import { BsFillSunFill } from "@react-icons/all-files/bs/BsFillSunFill";


const Header = () => {
    const [scrollTopPos, setScrollTopPos] = useState(0);
    const [burgerMenu, setBurgerMenu] = useState(0);
    const burgerGeneralClasses = "bg-black w-7 h-[3px] before:w-7 before:h-[3px] before:bg-black before:block before:relative after:w-7 after:h-[3px] after:bg-black 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(() => {
        window.addEventListener('scroll', async () => {
            setScrollTopPos(window.scrollY);
        })
    }, [])
    
    
    return (
        <header className={burgerMenu ? 'max-md:h-24 bg-[#F7F7FF]': 'h-24 bg-[#F7F7FF]'} >
            <div className={scrollTopPos >  60 ? 'fixed w-full bg-[#fff] md:bg-white shadow-md z-20 [&>nav]:h-16 md:[&>nav>a>.logo]:w-20 transition-all': 'z-20 fixed w-full bg-[#F7F7FF]'}>
                <nav className="max-sm:px-3 max-md:px-6 container mx-auto items-center flex justify-between relative py-3 h-24 transition-all">
                    <Link to='/'><Logo className="logo max-md:w-16 w-32 transition-all"/></Link>
                    <ul className={burgerMenu ? 'max-md:-translate-y-0 max-md:bg-[#F7F7FF] max-md:justify-center max-md:h-screen max-md:fixed max-md:w-full max-md:top-0 max-md:left-0 flex max-md:flex-col items-center max-md:text-4xl md:text-lg text-black' : 'max-md:-translate-y-full max-md:bg-[#F7F7FF] max-md:justify-center max-md:h-screen max-md:fixed max-md:w-full max-md:top-0 max-md:left-0 flex max-md:flex-col items-center max-md:text-4xl md:text-lg text-black'}>
                        <li className='md:mr-14 max-md:mb-5 font-bold'><Link to='/about'>О нас</Link></li>
                        <li className='md:mr-14 max-md:mb-5 font-bold'><Link to='/services'>Услуги</Link></li>
                        <li className='md:mr-14 max-md:mb-5 font-bold'><Link to='/price'>Цены</Link></li>
                        <li className='font-bold'><Link to='/contacts'>Контакты</Link></li>
                    </ul>
                    <div className="flex items-center max-md:justify-between max-md:w-full max-md:px-2 order-2">
                        <ul className='flex items-center max-md:text-xl text-2xl'>
                            <li className='mr-4 max-md:mr-3'><BiSearchAlt/></li>
                            <li className='mr-4 max-md:mr-3'><BiPhoneCall/></li>
                            <li className='mr-8 max-md:mr-3'><BsFillSunFill/></li>
                        </ul>
                        <a className='max-md:text-sm text-xl font-bold order-1' href="tel:+79602819790">+7 (960) 281 97-90</a>
                    </div>
                    <div className="md:hidden cursor-pointer order-3" 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>
                </nav>
            </div>
            
        </header>
    )
}

export default Header;