<script lang="ts">
	import { applicationStore, type Application } from '$lib/ApplicationsStore.svelte';
	import { statusStore } from '$lib/Types.svelte';
	import { onMount } from 'svelte';
	import DropZone from './DropZone.svelte';
	import { put } from '$lib/utils';

	let { index = $bindable(), onremove }: { index: number | undefined; onremove: () => void } =
		$props();

	const derivedItem: Application | undefined = $derived(applicationStore.all[index ?? -1]);

	async function moveStatus(status_id: string, endable?: boolean) {
		// Deactivate active item
		try {
			await put('application/status', {
				id: derivedItem?.id,
				status_id: status_id
			});
		} catch (e) {
			// TODO: Show User
			console.log('info data', e);
			return;
		}
		applicationStore.all[index ?? -1].status_id = status_id;
		applicationStore.reset();
		if (endable) {
			index = undefined;
			return;
		}
		applicationStore.loadItem = derivedItem;
		applicationStore.loadItemOpen = false;
	}

	onMount(() => {
		statusStore.load();
	});
</script>

{#if applicationStore.dragging && derivedItem}
	<div class="flex w-full flex-grow rounded-lg p-3 gap-2 absolute bottom-0 left-0 right-0 bg-white">
		{#each statusStore.dirLinks[derivedItem.status_id] as node}
			<DropZone icon={node.icon} ondrop={() => moveStatus(node.id, node.endable)}
				>{node.name}</DropZone
			>
		{/each}

		<DropZone icon="trash-fill text-danger" ondrop={() => onremove()}>Delete it</DropZone>
	</div>
{/if}
