<script lang="ts">
	import { applicationStore } from '$lib/ApplicationsStore.svelte';
	import { onMount } from 'svelte';

	let filter = $state('');

	onMount(() => {
		applicationStore.loadApplications();
	});
</script>

<div class="w-2/12 card p-3 flex flex-col">
	<h1>To Apply</h1>
	<div class="flex">
		<input placeholder="Filter" class="p-2 flex-grow" bind:value={filter} />
		<div>
			{applicationStore.applications.length}
		</div>
	</div>
	<div class="overflow-auto flex-grow p-2">
		{#each applicationStore.applications.filter((i) => {
			if (!filter) {
				return true;
			}
			const f = new RegExp(filter, 'ig');

			let x = i.title;

			if (i.company) {
				x = `${x} @ ${i.company}`;
			}

			return x.match(f);
		}) as item}
			<div
				class="card p-2 my-2 bg-slate-100"
				draggable="true"
				ondragstart={() => applicationStore.dragStart(item)}
				ondragend={() => {
					window.requestAnimationFrame(() => {
						applicationStore.dragEnd();
					});
				}}
				role="none"
			>
				<div class:animate-pulse={applicationStore.dragging?.id === item.id}>
					<h2 class="text-lg text-blue-500">
						{item.title}
						{#if item.company}
							<div class="text-violet-800" >
								@ {item.company}
							</div>
						{/if}
					</h2>
					<a
						href={item.url}
						class="text-violet-600 overflow-hidden whitespace-nowrap block"
					>
						{item.url}
					</a>
				</div>
			</div>
		{/each}
	</div>
</div>
