Popover

"use client";

import { Popover as BasePopover } from "@base-ui/react/popover";

type ClassName<State> = string | ((state: State) => string | undefined) | undefined;

function cx(...classes: (string | false | null | undefined)[]) {
  return classes.filter(Boolean).join(" ");
}

/** Prepends base classes while keeping Base UI's state-function form of className working. */
function withBase<State>(base: string, className: ClassName<State>) {
  return typeof className === "function" ? (state: State) => cx(base, className(state)) : cx(base, className);
}

/** Groups the popover parts and holds its open state. Pass `open`/`onOpenChange` to control it. */
export const Popover = BasePopover.Root;

/** A button that toggles the popover. Unstyled; pass `className`, or `render={<Button />}` to reuse your button. */
export const PopoverTrigger = BasePopover.Trigger;

/** A button that closes the popover. Unstyled; pass `className` or `render`. */
export const PopoverClose = BasePopover.Close;

type PositionerProps = BasePopover.Positioner.Props;

export interface PopoverContentProps extends BasePopover.Popup.Props {
  /** Side of the trigger to place the popover on. Flips when there is not enough room. */
  side?: PositionerProps["side"];
  /** Alignment against the trigger on the chosen side. */
  align?: PositionerProps["align"];
  /** Gap between the trigger and the popover, in pixels. */
  sideOffset?: PositionerProps["sideOffset"];
  /** Shift along the trigger edge, in pixels. */
  alignOffset?: PositionerProps["alignOffset"];
  /** Shows an arrow pointing at the trigger. */
  arrow?: boolean;
  /** Classes for the positioner wrapper, for example to change the z-index. */
  positionerClassName?: string;
  /** Element to portal into. Defaults to `document.body`. */
  container?: BasePopover.Portal.Props["container"];
}

/** The floating panel, rendered in a portal and positioned against the trigger. */
export function PopoverContent({
  side = "bottom",
  align = "center",
  sideOffset = 8,
  alignOffset = 0,
  arrow = false,
  positionerClassName,
  container,
  className,
  children,
  ...props
}: PopoverContentProps) {
  return (
    <BasePopover.Portal container={container}>
      <BasePopover.Positioner
        side={side}
        align={align}
        sideOffset={arrow && typeof sideOffset === "number" ? sideOffset + 2 : sideOffset}
        alignOffset={alignOffset}
        className={cx("z-50", positionerClassName)}
      >
        <BasePopover.Popup
          className={withBase(
            cx(
              "relative w-72 max-w-(--available-width) origin-(--transform-origin) rounded-xl p-4 text-sm",
              "border border-zinc-950/10 bg-white text-zinc-950 shadow-[0_12px_32px_-8px_rgb(0_0_0/0.18)]",
              "dark:border-white/15 dark:bg-black dark:text-white dark:shadow-[0_16px_48px_-12px_rgb(0_0_0/1),inset_0_1px_0_rgb(255_255_255/0.08)]",
              "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500",
              // Enter: 160ms from 96% at the trigger. Exit: 110ms, fades with a smaller scale.
              "transition-[opacity,scale] duration-160 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
              "data-[starting-style]:opacity-0 motion-safe:data-[starting-style]:scale-96",
              "data-[ending-style]:opacity-0 data-[ending-style]:duration-110 data-[ending-style]:ease-out motion-safe:data-[ending-style]:scale-98",
            ),
            className,
          )}
          {...props}
        >
          {arrow ? <PopoverArrow /> : null}
          {children}
        </BasePopover.Popup>
      </BasePopover.Positioner>
    </BasePopover.Portal>
  );
}

/** A 16 x 9 notch drawn in the panel's own fill and hairline, so it reads as part of the border. */
function PopoverArrow() {
  return (
    <BasePopover.Arrow
      className={cx(
        "flex",
        "data-[side=bottom]:-top-[9px]",
        "data-[side=top]:-bottom-[9px] data-[side=top]:rotate-180",
        "data-[side=left]:-right-[12.5px] data-[side=left]:rotate-90",
        "data-[side=right]:-left-[12.5px] data-[side=right]:-rotate-90",
      )}
    >
      <svg aria-hidden="true" width="16" height="9" viewBox="0 0 16 9" fill="none">
        <path d="M0 9.5L8 1.5L16 9.5Z" className="fill-white dark:fill-black" />
        <path d="M0 9L8 1L16 9" strokeWidth="1" className="stroke-zinc-950/10 dark:stroke-white/15" />
      </svg>
    </BasePopover.Arrow>
  );
}

/** Optional heading. Labels the popover with aria-labelledby. */
export function PopoverTitle({ className, ...props }: BasePopover.Title.Props) {
  return <BasePopover.Title className={withBase("text-sm leading-5 font-semibold", className)} {...props} />;
}

/** Optional supporting text. Describes the popover with aria-describedby. */
export function PopoverDescription({ className, ...props }: BasePopover.Description.Props) {
  return <BasePopover.Description className={withBase("text-sm leading-5 text-zinc-600 dark:text-zinc-400", className)} {...props} />;
}