Popover

"use client";

import { createContext, use, useEffect, useId, useMemo } from "react";
import type { ComponentProps, MouseEvent, ReactElement, ReactNode } from "react";
import { CloseIcon } from "../../lib/close-icon.tsx";
import { mergeRefs } from "../../lib/merge-refs.ts";
import { overlaySurfaceClassName } from "../../lib/overlay-class.ts";
import { cn } from "../../lib/utils.ts";
import { useCloseButtons, useOverlay, useSheet } from "../../primitives/overlay.ts";
import type { Overlay, Placement } from "../../primitives/overlay.ts";
import { Button } from "../button/button.tsx";
import type { ButtonProps } from "../button/button.tsx";

/** What a popover says in words; pass `messages` to say it in another language. */
export interface PopoverMessages {
  /** The name of a close button that is given no label of its own. */
  readonly close: string;
}

const MESSAGES: PopoverMessages = { close: "Close" };

interface PopoverRoot {
  readonly overlay: Overlay;
  readonly triggerId: string;
  readonly messages: PopoverMessages;
  /** Whether it was given a close button of its own. */
  readonly closable: boolean;
  /** Count a close button, until what is returned is called. */
  readonly addClose: () => () => void;
}

const PopoverContext = createContext<PopoverRoot | null>(null);

function useRoot(name: string): PopoverRoot {
  const root = use(PopoverContext);
  if (root === null) throw new Error(`${name} must be rendered inside a Popover.`);
  return root;
}

export type PopoverProps = {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  placement?: Placement;
  messages?: Partial<PopoverMessages>;
  children?: ReactNode;
};

export function Popover({
  open,
  defaultOpen,
  onOpenChange,
  placement,
  messages,
  children,
}: PopoverProps): ReactElement {
  const overlay = useOverlay({ open, defaultOpen, onOpenChange, placement });
  const triggerId = useId();
  const { closable, addClose } = useCloseButtons();
  const root = useMemo(
    () => ({ overlay, triggerId, messages: { ...MESSAGES, ...messages }, closable, addClose }),
    [overlay, triggerId, messages, closable, addClose],
  );
  return <PopoverContext value={root}>{children}</PopoverContext>;
}

export function PopoverTrigger({ ref, style, onClick, ...props }: ButtonProps): ReactElement {
  const { overlay, triggerId } = useRoot("PopoverTrigger");
  return (
    <Button
      id={triggerId}
      aria-haspopup="dialog"
      {...overlay.triggerProps}
      ref={mergeRefs(overlay.triggerProps.ref, ref)}
      style={{ ...overlay.triggerProps.style, ...style }}
      onClick={(event) => {
        onClick?.(event);
        if (!event.defaultPrevented) overlay.setOpen(!overlay.open, "first");
      }}
      {...props}
    />
  );
}

/**
 * A non-modal dialog attached to its trigger. On a phone it becomes a sheet
 * along the bottom edge, which is modal, and one given no close button has one
 * there all the same: with the page behind it inert and no Escape key,
 * assistive technology needs a control that closes it. The button comes last,
 * so that focus still opens on the popover's own first control.
 */
export function PopoverContent({
  className,
  ref,
  style,
  children,
  ...props
}: ComponentProps<"div">): ReactElement {
  const { overlay, triggerId, closable } = useRoot("PopoverContent");
  const sheet = useSheet();
  return (
    <div
      role="dialog"
      // Named by its control unless it is given a name of its own.
      aria-labelledby={props["aria-label"] === undefined ? triggerId : undefined}
      {...overlay.contentProps}
      ref={mergeRefs(overlay.contentProps.ref, ref)}
      tabIndex={-1}
      style={{ ...overlay.contentProps.style, ...style }}
      className={cn(
        overlaySurfaceClassName,
        "mt-1.5 w-72 p-4 pointer-coarse:max-sm:pb-[max(1rem,env(safe-area-inset-bottom))]",
        // Beneath the grabber, a band the close button sits in, clear of the content.
        "pointer-coarse:max-sm:pt-2 pointer-coarse:max-sm:before:mb-8",
        className,
      )}
      {...props}
    >
      {children}
      {sheet && !closable && <CloseButton className="absolute end-1 top-1" />}
    </div>
  );
}

/**
 * A button that closes the popover. Given a label it is left to its owner to
 * style, as a form's Cancel or Done is; given none it is an icon button, named
 * from `messages`.
 */
export function PopoverClose(props: ComponentProps<"button">): ReactElement {
  const { addClose } = useRoot("PopoverClose");
  useEffect(() => addClose(), [addClose]);
  return <CloseButton {...props} />;
}

function CloseButton({ onClick, className, children, ...props }: ComponentProps<"button">): ReactElement {
  const { overlay, messages } = useRoot("PopoverClose");
  const onClose = (event: MouseEvent<HTMLButtonElement>) => {
    onClick?.(event);
    if (!event.defaultPrevented) overlay.setOpen(false);
  };
  if (children !== undefined) {
    return (
      <button type="button" onClick={onClose} className={className} {...props}>
        {children}
      </button>
    );
  }
  return (
    <Button
      variant="ghost"
      size="icon"
      aria-label={messages.close}
      onClick={onClose}
      className={className}
      {...props}
    >
      <CloseIcon />
    </Button>
  );
}