Add Filter Dropdown

"use client";

import {
  useState,
  useCallback,
  useContext,
  useEffect,
  useRef,
  forwardRef,
  createContext,
  isValidElement,
  cloneElement,
} from "react";

import { cn } from "@/lib/cn";
import { motion, type HTMLMotionProps, type Transition } from "motion/react";
type DropdownContextValue = {
  open: boolean;
  setOpen: (open: boolean) => void;
};

const DropdownContext = createContext<DropdownContextValue | null>(null);

const useDropdown = () => {
  const context = useContext(DropdownContext);
  if (!context) {
    throw new Error("Dropdown components must be used within <Root />");
  }
  return context;
};

const spring = {
  type: "spring" as const,
  stiffness: 450,
  damping: 30,
  mass: 0.8,
} as Transition;

type RootProps = {
  children: React.ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
};

function DropdownMenu({
  children,
  open,
  defaultOpen = false,
  onOpenChange,
}: RootProps) {
  const [internalOpen, setInternalOpen] = useState(defaultOpen);
  const isControlled = open !== undefined;
  const resolvedOpen = isControlled ? open : internalOpen;

  const setOpen = useCallback(
    (next: boolean) => {
      if (!isControlled) {
        setInternalOpen(next);
      }
      onOpenChange?.(next);
    },
    [isControlled, onOpenChange]
  );

  return (
    <DropdownContext.Provider value={{ open: resolvedOpen, setOpen }}>
      <div className="relative inline-flex">{children}</div>
    </DropdownContext.Provider>
  );
}

type TriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  asChild?: boolean;
};

function DropdownMenuTrigger({
  asChild = false,
  onClick,
  children,
  ...props
}: TriggerProps) {
  const { open, setOpen } = useDropdown();

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    onClick?.(event);
    if (!event.defaultPrevented) {
      setOpen(!open);
    }
  };

  if (asChild && isValidElement(children)) {
    return cloneElement(children, {
      onClick: handleClick,
      "aria-expanded": open,
      "aria-haspopup": "menu",
    } as React.HTMLAttributes<HTMLElement>);
  }

  return (
    <button
      type="button"
      onClick={handleClick}
      aria-expanded={open}
      aria-haspopup="menu"
      {...props}
    >
      {children}
    </button>
  );
}

type ContentProps = Omit<HTMLMotionProps<"div">, "ref" | "layoutId"> & {
  layoutId?: string;
};

const DropdownMenuContent = forwardRef<HTMLDivElement, ContentProps>(
  ({ className, children, layoutId, ...rest }, forwardedRef) => {
    const { open, setOpen } = useDropdown();
    const contentRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
      if (!open) return;

      const onPointerDown = (event: PointerEvent) => {
        if (!contentRef.current) return;
        if (!contentRef.current.contains(event.target as Node)) {
          setOpen(false);
        }
      };

      document.addEventListener("pointerdown", onPointerDown);
      return () => document.removeEventListener("pointerdown", onPointerDown);
    }, [open, setOpen]);

    const assignRef = (node: HTMLDivElement | null) => {
      contentRef.current = node;
      if (typeof forwardedRef === "function") {
        forwardedRef(node);
      } else if (forwardedRef) {
        forwardedRef.current = node;
      }
    };

    return (
      <div className="absolute top-0 left-0 z-50">
        <motion.div
          ref={assignRef}
          layoutId={layoutId}
          layout
          initial={false}
          transition={spring}
          className={cn(
            "flex max-h-[220px] w-[200px] flex-col gap-1 overflow-y-auto rounded-xl bg-white p-1 shadow-md ring-1 ring-zinc-200",
            className
          )}
          {...rest}
        >
          {children}
        </motion.div>
      </div>
    );
  }
);

type ItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  inset?: boolean;
  closeOnSelect?: boolean;
};

const DropdownMenuItem = forwardRef<HTMLButtonElement, ItemProps>(
  (
    { className, inset, closeOnSelect = true, children, onClick, ...rest },
    forwardedRef
  ) => {
    const { setOpen } = useDropdown();

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
      onClick?.(event);
      if (!event.defaultPrevented && closeOnSelect) {
        setOpen(false);
      }
    };

    return (
      <button
        ref={forwardedRef}
        type="button"
        onClick={handleClick}
        className={cn(
          "group relative flex w-full items-center gap-2 rounded-lg p-2 text-left text-sm text-zinc-900 transition-colors",
          "hover:bg-zinc-100 focus-visible:bg-zinc-100 focus-visible:outline-none",
          "disabled:text-zinc-400",
          inset && "pl-9",
          className
        )}
        {...rest}
      >
        {children}
      </button>
    );
  }
);

function DropdownItemIcon({
  as: Component = "div",
  className,
  ...rest
}: {
  as?: React.ElementType;
  className?: string;
} & React.ComponentPropsWithoutRef<"div">) {
  return (
    <Component className={cn("size-5 text-zinc-500", className)} {...rest} />
  );
}

const DropdownMenuGroup = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...rest }, forwardedRef) => (
  <div
    ref={forwardedRef}
    className={cn("flex flex-col gap-1", className)}
    {...rest}
  />
));

const DropdownMenuLabel = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...rest }, forwardedRef) => (
  <div
    ref={forwardedRef}
    className={cn("px-2 py-1 text-xs uppercase text-zinc-500", className)}
    {...rest}
  />
));

const DropdownMenuSeparator = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...rest }, forwardedRef) => (
  <div
    ref={forwardedRef}
    className={cn("my-1 h-px bg-zinc-200", className)}
    {...rest}
  />
));

const DropdownMenuPortal = ({ children }: { children: React.ReactNode }) => (
  <>{children}</>
);

const DropdownMenuSub = ({ children }: { children: React.ReactNode }) => (
  <div>{children}</div>
);

const DropdownMenuSubTrigger = forwardRef<HTMLButtonElement, ItemProps>(
  ({ className, ...rest }, forwardedRef) => (
    <DropdownMenuItem
      ref={forwardedRef}
      className={cn("justify-between", className)}
      {...rest}
    />
  )
);

const DropdownMenuSubContent = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...rest }, forwardedRef) => (
  <div
    ref={forwardedRef}
    className={cn(
      "ml-2 rounded-xl border border-zinc-200 bg-white p-2",
      className
    )}
    {...rest}
  />
));

const DropdownMenuCheckboxItem = DropdownMenuItem;
const DropdownMenuRadioGroup = DropdownMenuGroup;
const DropdownMenuRadioItem = DropdownMenuItem;
const DropdownMenuArrow = () => null;

export {
  DropdownMenu as Root,
  DropdownMenuPortal as Portal,
  DropdownMenuTrigger as Trigger,
  DropdownMenuContent as Content,
  DropdownMenuItem as Item,
  DropdownItemIcon as ItemIcon,
  DropdownMenuGroup as Group,
  DropdownMenuLabel as Label,
  DropdownMenuSub as MenuSub,
  DropdownMenuSubTrigger as MenuSubTrigger,
  DropdownMenuSubContent as MenuSubContent,
  DropdownMenuCheckboxItem as CheckboxItem,
  DropdownMenuRadioGroup as RadioGroup,
  DropdownMenuRadioItem as RadioItem,
  DropdownMenuSeparator as Separator,
  DropdownMenuArrow as Arrow,
};