Dialog

"use client";

import { Dialog as BaseDialog } from "@base-ui/react/dialog";
import type { ComponentProps } from "react";

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 dialog parts and holds its open state. Pass `open`/`onOpenChange` to control it. */
export const Dialog = BaseDialog.Root;

/** A button that opens the dialog. Unstyled; pass `className`, or `render={<Button />}` to reuse your button. */
export const DialogTrigger = BaseDialog.Trigger;

/** A button that closes the dialog. Unstyled; pass `className` or `render`. */
export const DialogClose = BaseDialog.Close;

const sizes = {
  sm: "max-w-sm",
  md: "max-w-md",
  lg: "max-w-xl",
} as const;

export type DialogSize = keyof typeof sizes;

export interface DialogContentProps extends BaseDialog.Popup.Props {
  /** Maximum width of the panel. */
  size?: DialogSize;
  /** Renders an icon button in the corner that closes the dialog. */
  showCloseButton?: boolean;
  /** Accessible name of the corner close button. */
  closeLabel?: string;
  /** Classes for the backdrop behind the panel. */
  backdropClassName?: string;
  /** Element to portal into. Defaults to `document.body`. */
  container?: BaseDialog.Portal.Props["container"];
}

/** The dialog panel, rendered in a portal above a backdrop. */
export function DialogContent({
  size = "md",
  showCloseButton = true,
  closeLabel = "Close",
  backdropClassName,
  container,
  className,
  children,
  ...props
}: DialogContentProps) {
  return (
    <BaseDialog.Portal container={container}>
      <BaseDialog.Backdrop
        className={cx(
          "fixed inset-0 z-50 bg-black/40 dark:bg-black/70",
          "transition-opacity duration-220 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
          "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-150",
          backdropClassName,
        )}
      />
      <BaseDialog.Popup
        className={withBase(
          cx(
            // Centered with inset + auto margins so `translate` stays free for the motion.
            "fixed inset-0 z-50 m-auto grid h-fit max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] gap-5 overflow-y-auto overscroll-contain p-6",
            "rounded-2xl border border-zinc-950/10 bg-white text-zinc-950 shadow-[0_24px_64px_-16px_rgb(0_0_0/0.28),0_2px_6px_rgb(0_0_0/0.04)]",
            "dark:border-white/15 dark:bg-black dark:text-white dark:shadow-[0_24px_64px_-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: 220ms quint ease-out from 96% and 8px low. Exit: 150ms, a smaller move.
            "transition-[opacity,scale,translate] duration-220 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
            "data-[starting-style]:opacity-0 motion-safe:data-[starting-style]:translate-y-2 motion-safe:data-[starting-style]:scale-96",
            "data-[ending-style]:opacity-0 data-[ending-style]:duration-150 motion-safe:data-[ending-style]:translate-y-1 motion-safe:data-[ending-style]:scale-98",
            // A dialog opened on top of this one pushes it back slightly.
            "motion-safe:data-[nested-dialog-open]:scale-[0.97] data-[nested-dialog-open]:opacity-60",
            sizes[size],
          ),
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton ? (
          <BaseDialog.Close
            aria-label={closeLabel}
            className={cx(
              "absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-lg text-zinc-500",
              "transition-[background-color,color,scale] duration-150 ease-out active:duration-100 motion-reduce:transition-none",
              "hover:bg-zinc-950/[0.05] hover:text-zinc-950 motion-safe:active:scale-[0.94]",
              "dark:hover:bg-white/[0.08] dark:hover:text-white",
              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500",
            )}
          >
            <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" className="size-4">
              <path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
            </svg>
          </BaseDialog.Close>
        ) : null}
      </BaseDialog.Popup>
    </BaseDialog.Portal>
  );
}

/** Wraps the title and description. Leaves room for the corner close button. */
export function DialogHeader({ className, ...props }: ComponentProps<"div">) {
  return <div className={cx("grid gap-1.5 pr-10", className)} {...props} />;
}

/**
 * Holds the actions, right-aligned on wider screens and stacked on narrow ones. Sits in a band
 * under a divider at the bottom of the panel; it assumes the panel's default `p-6` padding.
 */
export function DialogFooter({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      className={cx(
        "-mx-6 -mb-6 mt-1 flex flex-col-reverse gap-2 border-t border-zinc-950/[0.07] bg-zinc-950/[0.015] px-6 py-4 sm:flex-row sm:justify-end",
        "dark:border-white/[0.08] dark:bg-transparent",
        className,
      )}
      {...props}
    />
  );
}

/** The dialog's heading. Labels the dialog with aria-labelledby. */
export function DialogTitle({ className, ...props }: BaseDialog.Title.Props) {
  return <BaseDialog.Title className={withBase("text-base leading-6 font-semibold tracking-[-0.01em]", className)} {...props} />;
}

/** Supporting text. Describes the dialog with aria-describedby. */
export function DialogDescription({ className, ...props }: BaseDialog.Description.Props) {
  return (
    <BaseDialog.Description className={withBase("text-sm leading-relaxed text-zinc-600 dark:text-zinc-400", className)} {...props} />
  );
}