<script lang="ts">
	/* eslint-disable @typescript-eslint/no-explicit-any */
	import PlusIcon from '@lucide/svelte/icons/plus';
	import { Field as FormField, Control, FieldErrors } from 'formsnap';
	import * as Field from '$lib/components/ui/field/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
	import * as Dialog from '$lib/components/ui/dialog/index.js';
	import { Input } from '$lib/components/ui/input/index.js';
	let {
		open = $bindable(false),
		createForm,
		createData,
		enhanceCreate
	}: {
		open: boolean;
		createForm: any;
		createData: any;
		enhanceCreate: any;
	} = $props();
</script>

<Dialog.Root bind:open>
	<Dialog.Trigger>
		{#snippet child({ props })}
			<Button {...props}>
				<PlusIcon data-icon="inline-start" />
				Create admin
			</Button>
		{/snippet}
	</Dialog.Trigger>
	<Dialog.Content class="sm:max-w-md">
		<Dialog.Header>
			<Dialog.Title>Create admin</Dialog.Title>
			<Dialog.Description>Add a manually managed admin account.</Dialog.Description>
		</Dialog.Header>
		<form method="POST" action="?/create" class="grid gap-2" use:enhanceCreate>
			<FormField form={createForm} name="name">
				<Field.Field>
					<Control id="create-name">
						{#snippet children({ props })}
							<Field.Label>Name</Field.Label>
							<Input {...props} autocomplete="name" bind:value={$createData.name} />
						{/snippet}
					</Control>
					<Field.Error><FieldErrors /></Field.Error>
				</Field.Field>
			</FormField>
			<FormField form={createForm} name="email">
				<Field.Field>
					<Control id="create-email">
						{#snippet children({ props })}
							<Field.Label>Email</Field.Label>
							<Input {...props} type="email" autocomplete="email" bind:value={$createData.email} />
						{/snippet}
					</Control>
					<Field.Error><FieldErrors /></Field.Error>
				</Field.Field>
			</FormField>
			<FormField form={createForm} name="password">
				<Field.Field>
					<Control id="create-password">
						{#snippet children({ props })}
							<Field.Label>Password</Field.Label>
							<Input
								{...props}
								type="password"
								autocomplete="new-password"
								bind:value={$createData.password}
							/>
						{/snippet}
					</Control>
					<Field.Error><FieldErrors /></Field.Error>
				</Field.Field>
			</FormField>
			<Dialog.Footer>
				<Dialog.Close>
					{#snippet child({ props })}
						<Button variant="outline" {...props}>Cancel</Button>
					{/snippet}
				</Dialog.Close>
				<Button type="submit">Create admin</Button>
			</Dialog.Footer>
		</form>
	</Dialog.Content>
</Dialog.Root>
