Disclosure & Overlays/Alert Dialog

"use client";

import * as React from "react";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import { type VariantProps } from "class-variance-authority";

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


// it announces itself on open; close is silent. either footer button IS
// the answer, and the layer's tap on it is the only voice the exit needs.
const AlertDialog = ({
	onOpenChange,
	...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>) => {
	const [playOpen] = useSound(SOUNDS.open);

	return (
		<AlertDialogPrimitive.Root
			onOpenChange={(open) => {
				if (open) playOpen();
				onOpenChange?.(open);
			}}
			{...props}
		/>
	);
};
AlertDialog.displayName = "AlertDialog";

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

const AlertDialogPortal = AlertDialogPrimitive.Portal;

const AlertDialogOverlay = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & {
	ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Overlay>>;
}) => (
	<AlertDialogPrimitive.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}
	/>
);
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;

// same sheet as the dialog — duplicated knowingly, not imported: the
	// catalog shows each component's source whole, so shells stay local, minus every casual exit: the primitive
// refuses outside-click and there is no X. standalone `translate`
// keeps centering out of the pop keyframes' transform.
const AlertDialogContent = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
	ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Content>>;
}) => (
	<AlertDialogPortal>
		<AlertDialogOverlay />
		<AlertDialogPrimitive.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}
		/>
	</AlertDialogPortal>
);
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;

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

// reading order ends at the action — the destructive choice sits at
// the far end, behind the cancel
const AlertDialogFooter = ({
	className,
	...props
}: React.HTMLAttributes<HTMLDivElement>) => (
	<div
		className={cn(
			"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
			className
		)}
		{...props}
	/>
);
AlertDialogFooter.displayName = "AlertDialogFooter";

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

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

// the action wears button styles by variant — destructive when the
// question is destructive, so color asks "are you sure" before the copy
const AlertDialogAction = ({
	ref,
	className,
	variant = "default",
	...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
	ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Action>>;
	variant?: VariantProps<typeof buttonVariants>["variant"];
}) => (
	<AlertDialogPrimitive.Action
		ref={ref}
		className={cn(buttonVariants({ variant }), className)}
		{...props}
	/>
);
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;

const AlertDialogCancel = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
	ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Cancel>>;
}) => (
	<AlertDialogPrimitive.Cancel
		ref={ref}
		className={cn(buttonVariants({ variant: "outline" }), className)}
		{...props}
	/>
);
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;

export {
	AlertDialog,
	AlertDialogTrigger,
	AlertDialogPortal,
	AlertDialogOverlay,
	AlertDialogContent,
	AlertDialogHeader,
	AlertDialogFooter,
	AlertDialogTitle,
	AlertDialogDescription,
	AlertDialogAction,
	AlertDialogCancel,
};