<script lang="ts">
	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
	import * as Dialog from '$lib/components/ui/dialog/index.js';
	import * as Field from '$lib/components/ui/field/index.js';
	import { Input } from '$lib/components/ui/input/index.js';
	import ImageUpload from '$lib/components/custom/image-upload/image-upload.svelte';
	import type { PageProps } from './$types';
	import { EMAIL_REGEX_STRING } from '$lib/consts';
	import { genDescription } from './gen-desc.remote';
	import * as RadioGroup from '$lib/components/ui/radio-group';
	import { Label } from '$lib/components/ui/label';
	import ItemListing from '$lib/components/custom/item-listing.svelte';

	let itemLocation: string | undefined = $state('');
	let foundLocation: string | undefined = $state();
	let description: string | undefined = $state();
	let isGenerating = $state(false);

	async function onSelect() {
		isGenerating = true;
		description = await genDescription();
		isGenerating = false;
	}


	let { data }: PageProps = $props();
</script>

<div class="max-w-7xl mx-auto px-4">
	<div class="justify-between flex">
		<h1 class="font-semibold text-4xl mb-4 mt-2">Found Items</h1>
		<div class="inline-block">
			<Dialog.Root>
				<Dialog.Trigger class={buttonVariants({ variant: 'default' })} type="button"
				>Post an item
				</Dialog.Trigger
				>
				<Dialog.Content>
					<Dialog.Header>
						<Dialog.Title>Submit Found Item</Dialog.Title>
						<Dialog.Description>
							Your item will need to be approved before becoming public.
						</Dialog.Description>
					</Dialog.Header>
					<form method="post" action="?/create" enctype="multipart/form-data">
						<Field.Group>
							<ImageUpload onSelect={onSelect} required={true} />
							<Field.Field>
								<Field.Label for="description">
									Description<span class="text-error">*</span>
								</Field.Label>
								<Input id="description" name="description" bind:value={description}
											 placeholder="A red leather book bag..."
											 required />
							</Field.Field>
							<Field.Field>
								<Field.Label for="foundLocation">
									Where did you find it?
								</Field.Label>
								<Input id="foundLocation" name="foundLocation" bind:value={foundLocation}
											 placeholder="By the tennis courts." required />
							</Field.Field>
							<RadioGroup.Root name="location" bind:value={itemLocation}>
								<div class="flex items-center space-x-2">
									<RadioGroup.Item value="finderPossession" id="finderPossession" />
									<Label for="finderPossession">I still have the item.</Label>
								</div>
								<div class="flex items-center space-x-2">
									<RadioGroup.Item value="turnedIn" id="turnedIn" />
									<Label for="turnedIn">I turned the item in to the school lost and found.</Label>
								</div>
							</RadioGroup.Root>
							<Field.Field class={itemLocation !== 'finderPossession' ? 'disabled hidden' : ''}>
								<Field.Label for="email">
									Your Email
								</Field.Label>
								<Input id="email" name="email" placeholder="name@domain.com"
											 class={itemLocation !== 'finderPossession' ? 'disabled' : ''} pattern={EMAIL_REGEX_STRING}
											 required={itemLocation === 'finderPossesion'} />
								<!--				<Field.Error>Enter a valid email address.</Field.Error>-->
							</Field.Field>
						</Field.Group>

						<Dialog.Footer class="mt-4">
							<Dialog.Close class={buttonVariants({ variant: "outline" })} type="button"
							>Cancel
							</Dialog.Close
							>
							<Button type="submit">Submit</Button>
						</Dialog.Footer>
					</form>
				</Dialog.Content>
			</Dialog.Root>
		</div>
	</div>

	<div class="justify-start grid gap-4 grid-cols-[repeat(auto-fill,minmax(16rem,max-content))]">
		{#each data.items as item (item.id)}
			<ItemListing item={item} />
		{/each}

	</div>
</div>


{#if isGenerating}
	<div class="fixed inset-0 bg-black/75 z-999999 w-screen h-screen justify-center items-center flex">
		<p class="text-6xl text-primary">Loading...</p>
	</div>
{/if}

