import { type FormEvent, useEffect, useRef } from "react";

import {
	Button,
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from "@ace/ui";

type Props = {
	open: boolean;
	name: string;
	title?: string;
	label?: string;
	onSave: (name: string) => void;
	onCancel: () => void;
};

export function Rename(
	{ open, name, title = "Rename tab", label = "Tab name", onSave, onCancel }: Props,
) {
	const input = useRef<HTMLInputElement>(null);

	useEffect(() => {
		if (!open) return;
		const frame = requestAnimationFrame(() => {
			const node = input.current;
			if (!node) return;
			node.value = name;
			node.focus();
			node.select();
		});
		return () => cancelAnimationFrame(frame);
	}, [open, name]);

	function save(event: FormEvent<HTMLFormElement>) {
		event.preventDefault();
		onSave(input.current?.value ?? name);
	}

	return (
		<Dialog open={open} onOpenChange={next => (next ? undefined : onCancel())}>
			<DialogContent className="gap-3 sm:max-w-80" showCloseButton={false}>
				<form className="flex flex-col gap-3" onSubmit={save}>
					<DialogHeader>
						<DialogTitle>{title}</DialogTitle>
						<DialogDescription className="sr-only">
							Set a custom tab name.
						</DialogDescription>
					</DialogHeader>
					<input
						ref={input}
						defaultValue={name}
						aria-label={label}
						maxLength={80}
						autoCorrect="off"
						autoCapitalize="off"
						spellCheck={false}
						className="h-8 w-full min-w-0 rounded-md squircle border border-input bg-input/20 px-2 text-base outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 md:text-xs/relaxed dark:bg-input/30"
					/>
					<DialogFooter>
						<Button type="button" variant="outline" onClick={onCancel}>
							Cancel
						</Button>
						<Button type="submit">Rename</Button>
					</DialogFooter>
				</form>
			</DialogContent>
		</Dialog>
	);
}