import { useEffect, useRef, useState } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { useRouter } from 'next/router'

import { useGlobals } from '@/lib/globals'

import SearchToolbar from '@/components/forms/SearchToolbar'

function Brand({ handleOpenMenu, openMenu }: any) {
  return (
    <div className="navbar-brand flex-grow pl-4 sm:pl-7 md:pl-0">
      <Link href="/" className="text-white font-bold">
        <Image
          src="/corporate-image-logo-header.svg"
          alt=""
          className="py-[18px] lg:w-[315px] sm:w-[245px] w-[175px] h-auto"
          width={315}
          height={81}
        />
      </Link>
      <div className="md:hidden pr-4 sm:pr-7 md:px-0">
        <button
          onClick={() => handleOpenMenu(!openMenu)}
          className={`navbar-collapse-trigger${openMenu ? ' active' : ''}`}
        >
          <span>Menu</span>
        </button>
      </div>
    </div>
  )
}
// function NavbarNav() {}
function Dropdown({ childItems, openDropdown, depthLevel }: any) {
  return (
    <div className={`navbar-dropdown ${openDropdown ? 'active' : ''}`}>
      <div className={depthLevel === 0 ? 'md:container lg:py-[80px] md:py-[65px]' : ''}>
        {childItems.nodes.map((child: any) => (
          <MenuItem
            key={child.id}
            href={child.path}
            label={child.label}
            childItems={child.childItems}
            depthLevel={depthLevel + 1}
          />
        ))}
      </div>
    </div>
  )
}
function MenuItem({ href, label, childItems, depthLevel, cssClasses = [] }: any) {
  let ref = useRef<HTMLDivElement>(null)
  const router = useRouter()

  const [openDropdown, setOpenDropdown] = useState(false)
  const activeClass = openDropdown ? 'active' : ''

  useEffect(() => {
    const closeDropdown = () => setOpenDropdown(false)
    router.events.on('routeChangeStart', closeDropdown)
    return () => router.events.off('routeChangeStart', closeDropdown)
  }, [router])

  useEffect(() => {
    const handler = (e: any) => {
      if (openDropdown && ref.current && !ref.current.contains(e.target)) {
        setOpenDropdown(false)
      }
    }
    document.addEventListener('mousedown', handler)
    document.addEventListener('touchstart', handler)
    return () => {
      document.removeEventListener('mousedown', handler)
      document.removeEventListener('touchstart', handler)
    }
  }, [openDropdown])

  // TODO: Might want to revisit this
  // useEffect(() => {
  //   const handlScroll = () => setOpenDropdown(false)
  //   window.addEventListener('scroll', handlScroll)
  //   return () => window.removeEventListener('scroll', handlScroll)
  // }, [])

  return (
    <div className="navbar-item" ref={ref}>
      {childItems?.nodes.length ? (
        <>
          <button
            className={`${
              depthLevel === 0 ? 'navbar-nav-section' : 'navbar-dropdown-section'
            } ${activeClass} text-left leading-none`}
            type="button"
            aria-haspopup="menu"
            aria-expanded={openDropdown}
            onClick={() => {
              setOpenDropdown(prev => !prev)
            }}
          >
            <span className="label">{label}</span>
            <span aria-hidden className={`${activeClass} icon-plus`}></span>
          </button>
          <Dropdown childItems={childItems} openDropdown={openDropdown} depthLevel={depthLevel} />
        </>
      ) : (
        <Link
          href={href}
          className={`navbar-link inline-block lg:text-[65px] md:text-[52px] sm:text-[42px] text-[26px] text-white leading-none pb-[10px] mb-[8px] ${cssClasses.join(
            ' '
          )}`}
        >
          <span className="label">{label}</span>
        </Link>
      )}
    </div>
  )
}

export default function Header() {
  const { headerMenu } = useGlobals()
  const router = useRouter()
  const [openMenu, setOpenMenu] = useState(false)
  const [show, setShow] = useState(true)
  const [lastScrollY, setLastScrollY] = useState(0)

  const controlNavbar = () => {
    if (window.scrollY > 60 && window.scrollY > lastScrollY) {
      setShow(false)
    } else {
      setShow(true)
    }

    setLastScrollY(window.scrollY)
  }

  useEffect(() => {
    const handleRouteChangeStart = () => setOpenMenu(false)
    const handleRouteChangeComplete = () => setShow(true)

    router.events.on('routeChangeStart', handleRouteChangeStart)
    router.events.on('routeChangeComplete', handleRouteChangeComplete)
    return () => {
      router.events.off('routeChangeStart', handleRouteChangeStart)
      router.events.off('routeChangeComplete', handleRouteChangeComplete)
    }
  }, [router])

  useEffect(() => {
    if (openMenu) {
      document?.querySelector('body')?.classList.add('mobile-menu-open')
      document?.querySelector('html')?.classList.add('mobile-menu-open')
    } else {
      document?.querySelector('body')?.classList.remove('mobile-menu-open')
      document?.querySelector('html')?.classList.remove('mobile-menu-open')
    }
  }, [openMenu])

  useEffect(() => {
    window.addEventListener('scroll', controlNavbar)
    return () => window.removeEventListener('scroll', controlNavbar)
  }, [lastScrollY])

  return (
    <header className={`navbar fixed-on-scroll-up ${show ? 'up' : 'down'} ${openMenu ? 'mobile-menu-open' : ''}`}>
      <div className="xl-container">
        <div className="flex content-between items-center">
          <Brand handleOpenMenu={setOpenMenu} openMenu={openMenu} />
          <div className={`navbar-collapse md:px-0 px-4 ${openMenu ? '' : 'md:flex hidden'}`}>
            <nav className="navbar-nav md:px-0 sm:px-[28px] px-0 md:order-1 order-2">
              {headerMenu.map((items: any) => {
                const depthLevel = 0
                if (items.label === 'Contact Us') {
                  return (
                    <Link
                      key={items.id}
                      href={items.path}
                      className={`navbar-btn btn btn--arrow-block font-bold uppercase md:ml-[20px] ml-auto ${
                        openMenu ? 'btn--arrow-block-white' : 'btn--arrow-block-dark'
                      }`}
                    >
                      {items.label}
                      <span aria-hidden className="arrow-block arrow-block-dark"></span>
                    </Link>
                  )
                }
                return (
                  <MenuItem
                    key={items.id}
                    href={items.path}
                    label={items.label}
                    childItems={items.childItems}
                    depthLevel={depthLevel}
                  />
                )
              })}
            </nav>
            <div className="md:order-2 order-1 flex items-center md:ml-[8px]">
              <SearchToolbar />
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}