'use client'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { Button } from '../ui/button'
import { Axios } from '@/utils/axios'
import { useRouter } from 'next/navigation'
import { toast } from 'sonner'
import { useUser } from '@/hooks/useUser'
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from '@/components/ui/navigation-menu'
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'

import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
import { Item } from '@radix-ui/react-navigation-menu'
import Image from 'next/image'

import { AiOutlineMenuFold } from 'react-icons/ai'
import { cn } from '@/lib/utils'

function Nav() {
  const router = useRouter()
  interface menuType {
    name: string
    link: string
  }
  const menus: menuType[] = [
    { name: 'Home', link: '/' },
    { name: 'Rooms', link: '/rooms' },
    // { name: "Restaurant & Bar", link: "/restaurant-bar" },
    { name: 'Meeting & Events', link: '/meetings' },
    { name: 'Contact', link: '/contact-us' },
    { name: 'About Us', link: '/about-us' },
  ]
  const [isOpen, setIsOpen] = useState(false)
  const [navBg, setNavBg] = useState('bg-transparent')

  const toggleDrawer = () => {
    setIsOpen((prevState) => !prevState)
  }

  const handleScroll = () => {
    if (window.scrollY >= 100) {
      setNavBg('bg-white bg-opacity-100')
    } else {
      setNavBg('bg-transparent')
    }
  }

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

  return (
    <nav
      className={`sticky top-0  m-auto z-10 pt-1 flex items-center transition-colors duration-1000  justify-around px-2 ${navBg} relative`}
    >
      <Image
        src={'/logo.png'}
        alt="logo"
        height={300}
        width={300}
        className={`w-[100px] h-auto z-1 bg-opacity-25`}
      />

      <NavigationMenu className="hidden md:flex space-x-0">
        <NavigationMenuList className="space-x-0">
          {menus?.map((menu: menuType, index: number) => {
            return (
              <NavigationMenuItem className="m-0" key={menu?.link}>
                <Link
                  className="text-brand hover:bg-transparent"
                  href={menu?.link}
                  legacyBehavior
                  passHref
                >
                  <NavigationMenuLink
                    className={cn(
                      navigationMenuTriggerStyle(),
                      'font-merriweather bg-transparent text-brand uppercase font-semibold rounded-none'
                    )}
                  >
                    {menu?.name}
                  </NavigationMenuLink>
                </Link>
              </NavigationMenuItem>
            )
          })}

          <Button
            onClick={() => {
              router.push('/rooms')
            }}
            className="p-2 h-8 bg-brand"
          >
            Book Now
          </Button>
        </NavigationMenuList>
      </NavigationMenu>

      <div className="flex md:hidden">
        <Drawer direction="left" open={isOpen}>
          <DrawerTrigger>
            {' '}
            <AiOutlineMenuFold
              className="flex md:hidden"
              onClick={toggleDrawer}
            />
          </DrawerTrigger>
          <DrawerContent>
            <NavigationMenu>
              <NavigationMenuList className="flex flex-col gap-y-4 items-start ml-4">
                {menus?.map((menu: menuType, index: number) => {
                  return (
                    <NavigationMenuItem
                      onClick={() => toggleDrawer()}
                      key={menu?.link}
                    >
                      <Link
                        className="text-brand"
                        href={menu?.link}
                        legacyBehavior
                        passHref
                      >
                        <NavigationMenuLink
                          className={cn(
                            navigationMenuTriggerStyle(),
                            `text-brand`
                          )}
                        >
                          {menu?.name}
                        </NavigationMenuLink>
                      </Link>
                    </NavigationMenuItem>
                  )
                })}
              </NavigationMenuList>
            </NavigationMenu>
          </DrawerContent>
        </Drawer>
      </div>
    </nav>
  )
}

export default Nav