Disclosure & Overlays/Dialog

"use client";

import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "@phosphor-icons/react/dist/ssr";

import { cn } from "@/lib/utils";
import { useSound } from "@/hooks/useSound";
import { SOUNDS } from "@/lib/sounds";


// the dialog owns its pair: open lands on the fifth, close resolves
// back to the root. wiring it to onOpenChange means esc, scrim click
// and the X all sound the same — the trigger and close are data-silent
// so the layer's tap never stacks on top.
const Dialog = ({
	onOpenChange,
	...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) => {
	const [playOpen] = useSound(SOUNDS.open);
	const [playClose] = useSound(SOUNDS.close);

	return (
		<DialogPrimitive.Root
			onOpenChange={(open) => {
				(open ? playOpen : playClose)();
				onOpenChange?.(open);
			}}
			{...props}
		/>
	);
};
Dialog.displayName = "Dialog";

const DialogTrigger = ({
	ref,
	...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger> & {
	ref?: React.Ref<React.ComponentRef<typeof DialogPrimitive.Trigger>>;
}) => <DialogPrimitive.Trigger ref={ref} data-silent {...props} />;
DialogTrigger.displayName = DialogPrimitive.Trigger.displayName;

const DialogClose = ({
	ref,
	...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> & {
	ref?: React.Ref<React.ComponentRef<typeof DialogPrimitive.Close>>;
}) => <DialogPrimitive.Close ref={ref} data-silent {...props} />;
DialogClose.displayName = DialogPrimitive.Close.displayName;

const DialogPortal = DialogPrimitive.Portal;

// the scrim is pure opacity — it never moves, it only exists more or less
const DialogOverlay = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
	ref?: React.Ref<React.ComponentRef<typeof DialogPrimitive.Overlay>>;
}) => (
	<DialogPrimitive.Overlay
		ref={ref}
		className={cn(
			"fixed inset-0 z-50 bg-scrim data-[state=open]:animate-overlay-in data-[state=closed]:animate-overlay-out motion-reduce:animate-none",
			className
		)}
		{...props}
	/>
);
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

// centering uses the standalone `translate` property, not a transform —
// the pop keyframes own `transform: scale(...)`, and the two compose
// instead of the keyframe wiping the centering out
const DialogContent = ({
	ref,
	className,
	children,
	...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
	ref?: React.Ref<React.ComponentRef<typeof DialogPrimitive.Content>>;
}) => (
	<DialogPortal>
		<DialogOverlay />
		<DialogPrimitive.Content
			ref={ref}
			className={cn(
				"fixed left-1/2 top-1/2 z-50 grid w-full max-w-md gap-4 rounded-lg border border-border-faint bg-card p-6 text-card-foreground outline-none [translate:-50%_-50%] data-[state=open]:animate-pop-in data-[state=closed]:animate-pop-out motion-reduce:animate-none",
				className
			)}
			{...props}
		>
			{children}
			<DialogClose className="absolute right-4 top-4 rounded-sm text-muted-foreground transition-colors duration-150 ease-swift hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring motion-reduce:transition-none">
				<X className="size-4" />
				<span className="sr-only">Close</span>
			</DialogClose>
		</DialogPrimitive.Content>
	</DialogPortal>
);
DialogContent.displayName = DialogPrimitive.Content.displayName;

const DialogHeader = ({
	className,
	...props
}: React.HTMLAttributes<HTMLDivElement>) => (
	<div className={cn("flex flex-col space-y-1", className)} {...props} />
);
DialogHeader.displayName = "DialogHeader";

const DialogFooter = ({
	className,
	...props
}: React.HTMLAttributes<HTMLDivElement>) => (
	<div
		className={cn(
			"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
			className
		)}
		{...props}
	/>
);
DialogFooter.displayName = "DialogFooter";

const DialogTitle = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
	ref?: React.Ref<React.ComponentRef<typeof DialogPrimitive.Title>>;
}) => (
	<DialogPrimitive.Title
		ref={ref}
		className={cn(
			"font-head text-base font-medium text-balance",
			className
		)}
		{...props}
	/>
);
DialogTitle.displayName = DialogPrimitive.Title.displayName;

const DialogDescription = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
	ref?: React.Ref<React.ComponentRef<typeof DialogPrimitive.Description>>;
}) => (
	<DialogPrimitive.Description
		ref={ref}
		className={cn("text-sm text-muted-foreground text-pretty", className)}
		{...props}
	/>
);
DialogDescription.displayName = DialogPrimitive.Description.displayName;

export {
	Dialog,
	DialogTrigger,
	DialogPortal,
	DialogOverlay,
	DialogContent,
	DialogHeader,
	DialogFooter,
	DialogTitle,
	DialogDescription,
	DialogClose,
};