//IMPORTING
//REACT
import React, { useEffect, useState } from 'react'
//REACT SCROLL
import { Link, scroller, animateScroll } from 'react-scroll'
//CLASS NAMES
import classNames from 'classnames'
//MOBILE MENU
import MobileMenu from '../MobileMenu'
//MOBILE MENU BUTTON
import MobileMenuButton from '../MobileMenuButton'
//MOBILE MENU ITEM
import MobileMenuItem from '../MobileMenuItem'
//STYLES
import styles from './Navbar.module.scss'

//NAVBAR
const Navbar = ({ items = [] }) => {
  const [isTop, setIsTop] = useState(true)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

  //USE EFFECT
  useEffect(() => {
    document.addEventListener('scroll', () => {
      const hasOverflowHidden =
        document.documentElement.style.getPropertyValue('overflow') === 'hidden'
      setIsTop(window.pageYOffset < 100 && !hasOverflowHidden)
    })
  }, [])

  //TOGGLE MOBILE MENU
  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen)
  }

  //HANDLE LINK CLICK
  const handleLinkClick = (to) => {
    setIsMobileMenuOpen(false)
    scroller.scrollTo(to, {
      smooth: true,
      offset: -25,
      duration: 1000,
    })
  }

  //SCROLL TO TOP
  const scrollToTop = () => {
    animateScroll.scrollToTop()
  }

  //RETURN
  return (
    <>
      <nav
        className={classNames(styles.nav, {
          [styles.navTransparent]: isTop || isMobileMenuOpen,
        })}
        id="navbar"
      >
        <MobileMenuButton
          open={isMobileMenuOpen}
          onClick={toggleMobileMenu}
          color={isTop || isMobileMenuOpen ? '#ffffff' : '#000000'}
          className={`${styles.mobileMenuButton} d-lg-none`}
        />
        <div onClick={scrollToTop} className={`${styles.navIcon} d-lg-none`}>
          <i className="icon icon-hearts" />
        </div>
        <div className={`${styles.navContent} d-none d-lg-flex`}>
          <ul className={styles.navItems}>
            {items.map((item) => (
              <li className={styles.navItem} key={item.id}>
                <Link
                  activeClass={styles.active}
                  to={item.id}
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={1000}
                >
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </nav>
      <MobileMenu open={isMobileMenuOpen}>
        {items.map((item, index) => (
          <MobileMenuItem
            key={item.id}
            delay={`${index * 0.1}s`}
            onClick={() => {
              handleLinkClick(item.id)
            }}
          >
            {item.title}
          </MobileMenuItem>
        ))}
      </MobileMenu>
    </>
  )
}

//EXPORTING NAVBAR
export default Navbar
