<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 FormSelect from '$lib/components/form-select.svelte';
	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 user
			</Button>
		{/snippet}
	</Dialog.Trigger>
	<Dialog.Content class="sm:max-w-md">
		<Dialog.Header>
			<Dialog.Title>Create user</Dialog.Title>
			<Dialog.Description>
				Create a user or add an existing email to this organization.
			</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"
								placeholder="Required for new users"
								bind:value={$createData.password}
							/>
						{/snippet}
					</Control>
					<Field.Error><FieldErrors /></Field.Error>
				</Field.Field>
			</FormField>
			<FormField form={createForm} name="confirmPassword">
				<Field.Field>
					<Control id="create-confirm-password">
						{#snippet children({ props })}
							<Field.Label>Confirm password</Field.Label>
							<Input
								{...props}
								type="password"
								autocomplete="new-password"
								placeholder="Repeat password"
								bind:value={$createData.confirmPassword}
							/>
						{/snippet}
					</Control>
					<Field.Error><FieldErrors /></Field.Error>
				</Field.Field>
			</FormField>
			<FormField form={createForm} name="role">
				<Field.Field>
					<Control id="create-role">
						{#snippet children({ props })}
							<Field.Label>Role</Field.Label>
							<FormSelect
								name="role"
								bind:value={$createData.role}
								options={[
									{ value: 'admin', label: 'Admin' },
									{ value: 'user', label: 'User' }
								]}
								triggerProps={props}
							/>
						{/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 user</Button>
			</Dialog.Footer>
		</form>
	</Dialog.Content>
</Dialog.Root>
