import { useState } from 'react';
import { Input } from 'react-aria-components';
import { useFetcher } from 'react-router';

import Code from '~/components/Code';
import Dialog from '~/components/Dialog';
import Spinner from '~/components/Spinner';
import TextField from '~/components/TextField';
import { cn } from '~/utils/cn';

type Properties = {
	readonly name: string;
	readonly disabled?: boolean;
};

// TODO: Switch to form submit instead of JSON patch
export default function Modal({ name, disabled }: Properties) {
	const [newName, setNewName] = useState(name);
	const fetcher = useFetcher();

	return (
		<div className="flex flex-col w-2/3">
			<h1 className="text-2xl font-medium mb-4">Tailnet Name</h1>
			<p className="text-gray-700 dark:text-gray-300">
				This is the base domain name of your Tailnet. Devices are accessible at{' '}
				<Code>[device].{name}</Code> when Magic DNS is enabled.
			</p>
			<Input
				readOnly
				className={cn(
					'block px-2.5 py-1.5 w-1/2 rounded-lg my-4',
					'border border-ui-200 dark:border-ui-600',
					'dark:bg-ui-800 dark:text-ui-300 text-sm',
					'outline-none',
				)}
				type="text"
				value={name}
				onFocus={(event) => {
					event.target.select();
				}}
			/>
			<Dialog>
				<Dialog.Button isDisabled={disabled}>
					{fetcher.state === 'idle' ? undefined : (
						<Spinner className="w-3 h-3" />
					)}
					Rename Tailnet
				</Dialog.Button>
				<Dialog.Panel
					onSubmit={() => {
						fetcher.submit(
							{
								'dns.base_domain': newName,
							},
							{
								method: 'PATCH',
								encType: 'application/json',
							},
						);
					}}
				>
					<Dialog.Title>Rename Tailnet</Dialog.Title>
					<Dialog.Text>
						Keep in mind that changing this can lead to all sorts of unexpected
						behavior and may break existing devices in your tailnet.
					</Dialog.Text>
					<TextField
						label="Tailnet name"
						placeholder="ts.net"
						state={[newName, setNewName]}
						className="my-2"
					/>
				</Dialog.Panel>
			</Dialog>
		</div>
	);
}