import { createContext, useContext, useState } from 'react'
import {
  Menu as HeadlessMenu,
  MenuButton as HeadlessMenuButton,
  MenuItem as HeadlessMenuItem,
  MenuItems as HeadlessMenuItems,
} from '@headlessui/react'
import { Loader } from './loader'
import clsx from 'clsx'

const MenuContext = createContext(null)

export function useMenu() {
  return useContext(MenuContext)
}

export function Menu({
  children,
  isLoading: defaultIsLoading = false,
  ...props
}) {
  const [isLoading, setIsLoading] = useState(defaultIsLoading)

  return (
    <MenuContext.Provider
      value={{ isLoading: isLoading || defaultIsLoading, setIsLoading }}
    >
      <HeadlessMenu {...props}>{children}</HeadlessMenu>
    </MenuContext.Provider>
  )
}

export function MenuButton({ children, className, disabled, ...props }) {
  const { isLoading } = useContext(MenuContext)

  return (
    <HeadlessMenuButton
      className={clsx(
        className,
        'relative overflow-hidden disabled:pointer-events-none',
      )}
      disabled={isLoading || disabled}
      {...props}
    >
      {isLoading && (
        <div className="absolute inset-0 flex justify-center items-center bg-white dark:bg-slate-800">
          <Loader className="w-4" />
        </div>
      )}

      {children}
    </HeadlessMenuButton>
  )
}

export function MenuItem({ children, className, ...props }) {
  return (
    <HeadlessMenuItem
      className={clsx(
        'relative flex items-center gap-1 py-2 px-4 hover:bg-zinc-100 dark:hover:bg-slate-600 w-full transition',
        'aria-[disabled=true]:text-gray-400 aria-[disabled=true]:dark:text-gray-600',
        'aria-[disabled=true]:pointer-events-none',
        className,
      )}
      {...props}
    >
      {children}
    </HeadlessMenuItem>
  )
}

export function MenuItems({ children, className, ...props }) {
  return (
    <HeadlessMenuItems
      className={clsx(
        'absolute right-0 origin-top-right bg-white dark:bg-slate-700 rounded-lg drop-shadow shadow overflow-hidden py-2',
        className,
      )}
      {...props}
    >
      {children}
    </HeadlessMenuItems>
  )
}

export function MenuSeparator() {
  return <hr className="my-2 border-gray-200 dark:border-t-slate-600" />
}