<script lang="ts">
	import * as Dialog from '$lib/components/ui/dialog';
	import { Button, buttonVariants } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import * as RadioGroup from '$lib/components/ui/radio-group';
	import { Label } from '$lib/components/ui/label';
	import * as Field from '$lib/components/ui/field';
	import type { Item } from '$lib/types/item.server';
	import NoImagePlaceholder from './no-image-placeholder.svelte';
	import LocationIcon from '@lucide/svelte/icons/map-pinned';
	import { EMAIL_REGEX_STRING } from '$lib/consts';


	let { open = $bindable(), item }: { open: boolean, item: Item | undefined } = $props();
</script>

<Dialog.Root bind:open>
	<Dialog.Content>
		<Dialog.Header>
			<Dialog.Title>Item Inquiry</Dialog.Title>
			<Dialog.Description>
				Have a question about an item? Ask here!
			</Dialog.Description>
		</Dialog.Header>

		<form method="post" action="?/inquire">
			<Field.Group>
				<div class="flex gap-4">

					{#if item?.image}
						<img src="https://fbla26.marinodev.com/uploads/{item.id}.jpg"
								 class="object-cover max-w-48 max-h-48 rounded-2xl"
								 alt="Lost item">
					{:else}
						<div class="min-h-48 w-full bg-accent flex flex-col justify-center">

							<div class="justify-center flex ">

								<NoImagePlaceholder className="" />
							</div>
							<p class="text-center mt-4">No image available</p>
						</div>
					{/if}
					<div class="inline-block">
						<div class="flex-1">{item?.description}</div>
						{#if item?.foundLocation}
							<div class="mt-2">
								<LocationIcon class="float-left mr-1" size={24} />
								<div>{item?.foundLocation}</div>
							</div>
						{/if}
					</div>
				</div>

				<Field.Field>
					<Field.Label for="description">
						Please describe your inquiry <span class="text-error">*</span>
					</Field.Label>
					<Input
						id="inquiry"
						name="inquiry"
						placeholder="Is there a ..."
						maxlength={200}
						required
					/>
				</Field.Field>
				<Field.Field>

					<Field.Label for="email">
						Your Email <span class="text-error">*</span>
					</Field.Label>
					<Input
						id="email"
						name="email"
						placeholder="name@domain.com"
						pattern={EMAIL_REGEX_STRING}
						required
					/>
				</Field.Field>
			</Field.Group>

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


