'use client';
import Image from 'next/image';
import Link from 'next/link';
import React, { useEffect, useRef, useState } from 'react';
import { FiSearch, FiUser } from 'react-icons/fi';
import { HiShoppingBag } from 'react-icons/hi2';

// import logoWhite from '/public/images/logo-white.svg';
import logoBlack from '/public/images/logo-black.svg';

import styles from './navbar.module.css';

// components/Navbar.tsx
export function Navbar() {
  const prevScrollY = useRef(0);
  const [navBarStyle, setNavBarStyle] = useState('initial');
  const [isVisible, setIsVisible] = useState('false');
  const [isExpanded, setIsExpanded] = useState<boolean>(false);
  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      if (currentScrollY > prevScrollY.current && currentScrollY > 100) {
        // Scrolling down and scrolled past 100px
        setNavBarStyle('initial');
      } else if (currentScrollY < prevScrollY.current && currentScrollY > 100) {
        // Scrolling up and scrolled past 100px
        setNavBarStyle('scrolledUp');
      } else if (currentScrollY <= 100) {
        setNavBarStyle('initial');
      }
      prevScrollY.current = currentScrollY;
    };
    window.addEventListener('scroll', handleScroll);

    return () => window.removeEventListener('scroll', handleScroll);
  }, []); // Empty dependency array

  // const navClasses = `${styles.navBar} ${
  //   navBarStyle === 'scrolledUp'
  //     ? styles.navBarScrolledUp
  //     : styles.navBarInitial
  // }`;

  //Hack for now
  const navClasses = `${styles.navBar} ${
    navBarStyle === 'scrolledUp'
      ? styles.navBarScrolledUp
      : styles.navBarScrolledUp
  }`;

  function toggleMenu() {
    if (isVisible === 'true') {
      setIsVisible('false');
      setIsExpanded(false);
    } else {
      setIsVisible('true');
      setIsExpanded(true);
    }
  }

  return (
    <div>
      <button
        className={styles.mobileNavToggle}
        aria-controls='primary-navigation'
        aria-expanded={isExpanded}
        onClick={toggleMenu}
      >
        <span className='sr-only'>Menu</span>
      </button>
      <nav data-visible={isVisible} className={navClasses}>
        {/* Left side */}
        <div>
          <Link href='/about-us' className='font-medium hover:underline'>
            About Us
          </Link>
        </div>
        {/* Middle */}
        <div className='flex-shrink'>
          <Link href='/' className='text-lg font-bold'>
            <Image
              src={logoBlack}
              // src={navBarStyle === 'scrolledUp' ? logoWhite : logoBlack}
              alt='Logo'
              className='h-full logo'
              width={100}
              height={100}
            />
          </Link>
        </div>
        {/* Right side */}
        <div className=''>
          <button aria-label='Search'>
            <FiSearch size={20} />
          </button>
          <button aria-label='Profile'>
            <FiUser size={20} />
          </button>
          <a aria-label='Shopping Cart' href='/products'>
            <HiShoppingBag size={20} />
          </a>
        </div>
      </nav>
    </div>
  );
}