import { Laptop, Moon, Sun } from "lucide-react"
import * as React from "react"

import { useTheme } from "../theme-provider"
import { Button } from "../ui/button"

const options = [
  { value: "system" as const, label: "System", icon: Laptop },
  { value: "light" as const, label: "Light", icon: Sun },
  { value: "dark" as const, label: "Dark", icon: Moon },
]

export function ThemeMenu() {
  const { appearance, setAppearance, inherited } = useTheme()
  const [open, setOpen] = React.useState(false)
  const rootRef = React.useRef<HTMLDivElement>(null)
  const firstItemRef = React.useRef<HTMLButtonElement>(null)
  const menuId = React.useId()
  const ActiveIcon = options.find((item) => item.value === appearance)?.icon ?? Laptop

  React.useEffect(() => {
    if (!open) return
    firstItemRef.current?.focus()
    const closeOnOutsidePointer = (event: PointerEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
    }
    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpen(false)
    }
    document.addEventListener("pointerdown", closeOnOutsidePointer)
    document.addEventListener("keydown", closeOnEscape)
    return () => {
      document.removeEventListener("pointerdown", closeOnOutsidePointer)
      document.removeEventListener("keydown", closeOnEscape)
    }
  }, [open])

  if (inherited) return null

  const label = appearance === "system" ? "System" : appearance === "light" ? "Light" : "Dark"
  return (
    <div ref={rootRef} className="relative">
      <Button
        aria-controls={menuId}
        aria-expanded={open}
        aria-haspopup="menu"
        aria-label={`Appearance: ${label}`}
        onClick={() => setOpen((value) => !value)}
        size="icon-sm"
        variant="ghost"
      >
        <ActiveIcon />
      </Button>
      {open ? (
        <div
          id={menuId}
          className="absolute end-0 top-full z-50 mt-1 flex min-w-44 flex-col rounded-xl border bg-popover p-1 text-popover-foreground shadow-md"
          role="menu"
        >
          {options.map(({ value, label: optionLabel, icon: Icon }, index) => (
            <Button
              key={value}
              ref={index === 0 ? firstItemRef : undefined}
              aria-current={appearance === value ? "true" : undefined}
              className="w-full justify-start"
              onClick={() => {
                setAppearance(value)
                setOpen(false)
              }}
              role="menuitem"
              size="sm"
              variant="ghost"
            >
              <Icon /> {optionLabel}
            </Button>
          ))}
        </div>
      ) : null}
    </div>
  )
}