Menus & Feedback/Toast

"use client";

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

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

const ToastProvider = ({
	// swipe right, toward the viewport edge the stack hangs off — the
	// dismissal gesture throws the toast out the way it came in
	swipeDirection = "right",
	...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitive.Provider>) => (
	<ToastPrimitive.Provider swipeDirection={swipeDirection} {...props} />
);
ToastProvider.displayName = ToastPrimitive.Provider.displayName;

const ToastViewport = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> & {
	ref?: React.Ref<React.ComponentRef<typeof ToastPrimitive.Viewport>>;
}) => (
	<ToastPrimitive.Viewport
		ref={ref}
		className={cn(
			"fixed bottom-0 right-0 z-50 flex w-full max-w-sm flex-col gap-2 p-4 outline-none",
			className
		)}
		{...props}
	/>
);
ToastViewport.displayName = ToastPrimitive.Viewport.displayName;

const Toast = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root> & {
	ref?: React.Ref<React.ComponentRef<typeof ToastPrimitive.Root>>;
}) => {
	// the toast owns notify, played on arrival — not on the button that
	// caused it. the press already tapped through the layer; arrival is a
	// second event and the second sound tells that truth.
	const [playNotify] = useSound(SOUNDS.notify);
	const announced = React.useRef(false);
	React.useEffect(() => {
		if (announced.current) return;
		announced.current = true;
		playNotify();
	}, [playNotify]);

	return (
		<ToastPrimitive.Root
			ref={ref}
			className={cn(
				"relative flex w-full items-center gap-3 overflow-hidden rounded-lg border border-border bg-card p-4 pr-8 text-card-foreground",
				// enter pops; programmatic close fades
				"data-[state=open]:animate-pop-in data-[state=closed]:animate-overlay-out",
				// while swiping, track the finger 1:1 through the radix var —
				// no transition fighting the pointer
				"data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
				// under the threshold it springs back; past it, it fades out
				"data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform data-[swipe=cancel]:duration-200 data-[swipe=cancel]:ease-swift",
				"data-[swipe=end]:animate-overlay-out",
				"motion-reduce:animate-none motion-reduce:transition-none",
				className
			)}
			{...props}
		/>
	);
};
Toast.displayName = ToastPrimitive.Root.displayName;

const ToastTitle = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitive.Title> & {
	ref?: React.Ref<React.ComponentRef<typeof ToastPrimitive.Title>>;
}) => (
	<ToastPrimitive.Title
		ref={ref}
		className={cn("text-sm font-medium", className)}
		{...props}
	/>
);
ToastTitle.displayName = ToastPrimitive.Title.displayName;

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

// a real action, so it taps through the layer like any button — no
// data-silent here; the tap is the press, notify was the arrival.
// it wears the real outline button, not a lookalike: when button.tsx
// retunes hover or focus, toast actions follow for free
const ToastAction = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitive.Action> & {
	ref?: React.Ref<React.ComponentRef<typeof ToastPrimitive.Action>>;
}) => (
	<ToastPrimitive.Action
		ref={ref}
		className={cn(
			buttonVariants({ variant: "outline", size: "sm" }),
			"shrink-0",
			className
		)}
		{...props}
	/>
);
ToastAction.displayName = ToastPrimitive.Action.displayName;

const ToastClose = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitive.Close> & {
	ref?: React.Ref<React.ComponentRef<typeof ToastPrimitive.Close>>;
}) => (
	<ToastPrimitive.Close
		ref={ref}
		className={cn(
			"absolute right-2 top-2 rounded-sm p-1 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",
			className
		)}
		aria-label="Dismiss"
		{...props}
	>
		<X className="h-4 w-4" />
	</ToastPrimitive.Close>
);
ToastClose.displayName = ToastPrimitive.Close.displayName;

export {
	ToastProvider,
	ToastViewport,
	Toast,
	ToastTitle,
	ToastDescription,
	ToastAction,
	ToastClose,
};