<script lang="ts">
	/* eslint-disable @typescript-eslint/no-explicit-any */
	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';
	import * as NativeSelect from '$lib/components/ui/native-select/index.js';
	import { Textarea } from '$lib/components/ui/textarea/index.js';
	let {
		editingRecord,
		editForm,
		editData,
		enhanceEdit,
		onClose
	}: {
		editingRecord: any;
		editForm: any;
		editData: any;
		enhanceEdit: any;
		onClose: () => void;
	} = $props();
</script>

<Dialog.Root open={!!editingRecord} onOpenChange={(open) => !open && onClose()}>
	<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
		<Dialog.Header>
			<Dialog.Title>Edit client</Dialog.Title>
			<Dialog.Description>Update this client record.</Dialog.Description>
		</Dialog.Header>
		{#if editingRecord}
			<form method="POST" action="?/edit" class="grid gap-2" use:enhanceEdit>
				<input type="hidden" name="id" value={$editData.id} />
				<FormField form={editForm} name="name">
					<Field.Field>
						<Control id="edit-name">
							{#snippet children({ props })}
								<Field.Label>Name</Field.Label>
								<Input {...props} type="text" bind:value={$editData.name} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={editForm} name="type">
					<Field.Field>
						<Control id="edit-type">
							{#snippet children({ props })}
								<Field.Label>Type</Field.Label>
								<NativeSelect.Root {...props} class="w-full" bind:value={$editData.type}>
									<NativeSelect.Option value="">Not set</NativeSelect.Option>
									<NativeSelect.Option value="business">Business</NativeSelect.Option>
									<NativeSelect.Option value="sport">Sport</NativeSelect.Option>
									<NativeSelect.Option value="individual">Individual</NativeSelect.Option>
								</NativeSelect.Root>
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={editForm} name="status">
					<Field.Field>
						<Control id="edit-status">
							{#snippet children({ props })}
								<Field.Label>Status</Field.Label>
								<NativeSelect.Root {...props} class="w-full" bind:value={$editData.status}>
									<NativeSelect.Option value="">Not set</NativeSelect.Option>
									<NativeSelect.Option value="active">Active</NativeSelect.Option>
									<NativeSelect.Option value="prospect">Prospect</NativeSelect.Option>
									<NativeSelect.Option value="paused">Paused</NativeSelect.Option>
								</NativeSelect.Root>
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={editForm} name="website">
					<Field.Field>
						<Control id="edit-website">
							{#snippet children({ props })}
								<Field.Label>Website</Field.Label>
								<Input
									{...props}
									type="url"
									placeholder="https://example.com"
									bind:value={$editData.website}
								/>
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={editForm} name="notes">
					<Field.Field>
						<Control id="edit-notes">
							{#snippet children({ props })}
								<Field.Label>Notes</Field.Label>
								<Textarea {...props} bind:value={$editData.notes} />
							{/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">Save changes</Button>
				</Dialog.Footer>
			</form>
		{/if}
	</Dialog.Content>
</Dialog.Root>
