<script lang="ts">
	import { addGift } from '$lib/remotes/db.remote';
	import { GiftStatus, type Gift } from '@prisma/client';
	import { Plus } from 'lucide-svelte';
	import Modal from '../atoms/Modal.svelte';

	let { personId, personName } = $props();

	let isOpen = $state(false);
	const initGift = {
		name: '',
		price: 0,
		url: '',
		description: '',
		status: 'PLANNED'
	} as const;
	let gift: Omit<Gift, 'id' | 'personId'> = $state(initGift);

	const open = () => {
		isOpen = true;
	};

	const close = () => {
		isOpen = false;
	};

	const handleAddGift = () => {
		addGift({
			personId,
			gift: {
				name: gift.name,
				price: gift.price ?? 0,
				url: gift.url ?? '',
				description: gift.description ?? '',
				status: gift.status
			}
		}).then(close);

		gift = initGift;
	};

	const inputClasses = [
		'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
		'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
		'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
	];
</script>

<button
	class="w-full border-dashed border-2 mt-4 hover:bg-red-50 hover:border-red-200 hover:text-red-600 flex items-center justify-center gap-2 transition-all duration-200 cursor-pointer p-2"
	onclick={open}
>
	<Plus class="w-4 h-4" />
	Dodaj prezent dla {personName}
</button>

{#if isOpen}
	<Modal {isOpen} heading="Dodaj nową osobę" onClose={close}>
		<fieldset class="fieldset">
			<legend class="fieldset-legend text-black/70">Nazwa</legend>
			<input type="text" bind:value={gift.name} placeholder="Prezentu" class={inputClasses} />
		</fieldset>
		<fieldset class="fieldset">
			<legend class="fieldset-legend text-black/70">Cena</legend>
			<input type="number" bind:value={gift.price} placeholder="Cena" class={inputClasses} />
		</fieldset>
		<fieldset class="fieldset">
			<legend class="fieldset-legend text-black/70">URL</legend>
			<input type="url" bind:value={gift.url} placeholder="URL" class={inputClasses} />
		</fieldset>
		<fieldset class="fieldset">
			<legend class="fieldset-legend text-black/70">Opis</legend>
			<textarea bind:value={gift.description} placeholder="Opis"></textarea>
		</fieldset>
		<fieldset class="fieldset">
			<legend class="fieldset-legend text-black/70">Status</legend>
			<select bind:value={gift.status} class={inputClasses}>
				{#each Object.values(GiftStatus) as status}
					<option value={status}>{status}</option>
				{/each}
			</select>
		</fieldset>
		<div class="flex justify-end mt-6">
			<button class="btn btn-error" onclick={handleAddGift}>Dodaj prezent</button>
		</div>
	</Modal>
{/if}
