import React, { ReactNode, useState, useEffect } from 'react'
import { mdiClose, mdiDotsVertical } from '@mdi/js'
import { containerMaxW } from '../config'
import BaseIcon from './BaseIcon'
import NavBarItemPlain from './NavBarItemPlain'
import NavBarMenuList from './NavBarMenuList'
import ContextSwitcher from './ContextSwitcher'
import { MenuNavBarItem } from '../interfaces'
import {  useAppSelector } from '../stores/hooks';

type Props = {
  menu: MenuNavBarItem[]
  className: string
  children: ReactNode
}

export default function NavBar({ menu, className = '', children }: Props) {
  const [isMenuNavBarActive, setIsMenuNavBarActive] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false);
  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
  const { currentUser } = useAppSelector((state) => state.auth);

  useEffect(() => {
    const handleScroll = () => {
      const scrolled = window.scrollY > 0;
      setIsScrolled(scrolled);
    };
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const handleMenuNavBarToggleClick = () => {
    setIsMenuNavBarActive(!isMenuNavBarActive)
  }

  return (
    <nav
      className={`${className} top-0 inset-x-0 fixed ${bgColor} h-20 z-30 transition-all w-screen lg:w-auto dark:bg-dark-800 ${isScrolled ? 'shadow-md shadow-slate-200/50 dark:shadow-none' : ''}`}
    >
      <div className={`flex lg:items-stretch ${containerMaxW} h-20 ${isScrolled && `border-b border-pavitra-400 dark:border-dark-700`}`}>
        
        {/* Logo Section - Aligned with the mockup */}
        <div className="flex items-center px-4 lg:px-0 ml-4 lg:ml-0">
           <div className="flex items-center space-x-3 mr-8">
              <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200 dark:shadow-none">
                  <span className="text-white font-bold text-xl">SH</span>
              </div>
              <div className="flex flex-col">
                  <b className="text-xl font-black text-slate-800 dark:text-white tracking-tight leading-tight">SmartHisab</b>
                  <span className="text-[10px] font-bold text-indigo-500 tracking-[0.2em] leading-none uppercase">MODERN ACCOUNTING</span>
              </div>
          </div>

          <div className="hidden lg:flex items-center ml-4">
             <ContextSwitcher />
          </div>
        </div>

        <div className="flex flex-1 items-stretch h-20 ml-8">{children}</div>
        
        <div className="flex-none items-stretch flex h-20 lg:hidden">
          <NavBarItemPlain onClick={handleMenuNavBarToggleClick}>
            <BaseIcon path={isMenuNavBarActive ? mdiClose : mdiDotsVertical} size={24} />
          </NavBarItemPlain>
        </div>
        
        <div
          className={`${
            isMenuNavBarActive ? 'block' : 'hidden'
          } flex items-center max-h-screen-menu lg:overflow-visible absolute w-screen top-20 left-0 ${bgColor} shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-dark-800`}
        >
          <NavBarMenuList menu={menu} />
        </div>
      </div>
    </nav>
  )
}