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

	let { activeItem = $bindable() }: { activeItem: Application | undefined } = $props();

	async function moveStatus(status: AsEnum<typeof ApplicationStatus>, moveOut = true) {
		if (!activeItem) return;
		// Deactivate active item
		try {
			await put('application/status', {
				id: activeItem.id,
				status: status
			});
		} catch (e) {
			// Show User
			console.log('info data', e);
			return;
		}
		applicationStore.loadApplications(true);
		applicationStore.loadAplyed(true);
		if (moveOut) {
			activeItem = undefined;
		} else {
			activeItem.status = status;
		}
		//openedWindow?.close();
		//openedWindow = undefined;
	}

	async function remove() {
		if (!activeItem) return;
		// Deactivate active item
		try {
			await deleteR(`application/${activeItem.id}`);
		} catch (e) {
			// Show User
			console.log('info data', e);
			return;
		}
		applicationStore.loadApplications(true);
		activeItem = undefined;
		//openedWindow?.close();
		//openedWindow = undefined;
	}
</script>

{#if applicationStore.dragging && activeItem}
	<div
		class="flex w-full flex-grow rounded-lg p-3 gap-2 absolute bottom-0 left-0 right-0 bg-white"
	>
		<!-- Do nothing -->
		{#if activeItem.status === ApplicationStatus.WorkingOnIt}
			<DropZone
				icon="box-arrow-down"
				ondrop={async () => {
					await moveStatus(ApplicationStatus.ToApply);
					applicationStore.loadAplyed(true);
					applicationStore.loadAll(true);
				}}
			>
				To apply
			</DropZone>
		{/if}

		{#if activeItem.status === ApplicationStatus.WorkingOnIt}
			<!-- Ignore -->
			<DropZone icon="trash-fill" ondrop={() => moveStatus(ApplicationStatus.Ignore)}>
				Ignore it
			</DropZone>
		{/if}

		{#if ([ApplicationStatus.WorkingOnIt, ApplicationStatus.Expired] as number[]).includes(activeItem.status)}
			<!-- Expired -->
			<DropZone
				icon="clock-fill text-orange-500"
				ondrop={() => {
					if (activeItem && activeItem.status === ApplicationStatus.Expired) {
						moveStatus(ApplicationStatus.ToApply, false);
					} else {
						moveStatus(ApplicationStatus.Expired);
					}
				}}
			>
				Mark as expired
			</DropZone>
		{/if}

		{#if activeItem.status === ApplicationStatus.WorkingOnIt}
			<!-- Repeated -->
			<DropZone icon="trash-fill text-danger" ondrop={() => remove()}>Delete it</DropZone>
		{/if}

		{#if ([ApplicationStatus.WorkingOnIt, ApplicationStatus.TasksToDo] as number[]).includes(activeItem.status)}
			<!-- Applyed -->
			<DropZone
				icon="server text-confirm"
				ondrop={async () => {
					await moveStatus(ApplicationStatus.Applyed);
					applicationStore.loadAll(true);
					applicationStore.loadAplyed(true);
				}}
			>
				Apply
			</DropZone>
		{/if}

		{#if activeItem.status === ApplicationStatus.Applyed}
			<!-- Tasks to do -->
			<DropZone
				icon="server text-confirm"
				ondrop={async () => {
					await moveStatus(ApplicationStatus.TasksToDo);
					applicationStore.loadAll(true);
					applicationStore.loadAplyed(true);
				}}
			>
				Tasks To Do
			</DropZone>
		{/if}

		{#if activeItem.status === ApplicationStatus.TasksToDo}
			<!-- Tasks to do -->
			<DropZone
				icon="server text-confirm"
				ondrop={async () => {
					await moveStatus(ApplicationStatus.TasksToDo2);
					applicationStore.loadAll(true);
					applicationStore.loadAplyed(true);
				}}
			>
				Tasks To Do 2
			</DropZone>
		{/if}

		{#if ([ApplicationStatus.TasksToDo, ApplicationStatus.Applyed] as number[]).includes(activeItem.status)}
			<!-- Tasks to do -->
			<DropZone
				icon="server text-confirm"
				ondrop={async () => {
					await moveStatus(ApplicationStatus.InterviewStep1);
					applicationStore.loadAll(true);
					applicationStore.loadAplyed(true);
				}}
			>
				Interview 1
			</DropZone>
		{/if}

		{#if ([ApplicationStatus.InterviewStep1] as number[]).includes(activeItem.status)}
			<!-- Tasks to do -->
			<DropZone
				icon="server text-confirm"
				ondrop={async () => {
					await moveStatus(ApplicationStatus.InterviewStep2);
					applicationStore.loadAll(true);
					applicationStore.loadAplyed(true);
				}}
			>
				Interview 2
			</DropZone>
		{/if}

		{#if ([ApplicationStatus.InterviewStep1, ApplicationStatus.InterviewStep2] as number[]).includes(activeItem.status)}
			<!-- Tasks to do -->
			<DropZone
				icon="badge-vo-fill text-confirm"
				ondrop={async () => {
					await moveStatus(ApplicationStatus.FinalInterview);
					applicationStore.loadAll(true);
					applicationStore.loadAplyed(true);
				}}
			>
				Interview Final
			</DropZone>
		{/if}

		{#if !([ApplicationStatus.ApplyedButSaidNo] as number[]).includes(activeItem.status)}
			<!-- Rejected -->
			<DropZone
				icon="fire text-danger"
				ondrop={() => {
					moveStatus(ApplicationStatus.ApplyedButSaidNo);
					applicationStore.loadAll(true);
					applicationStore.loadAplyed(true);
				}}
			>
				I was rejeted :(
			</DropZone>
		{/if}
	</div>
{/if}
