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

	let { save, index }: { index: number; save: () => void } = $props();

	let companies = $derived(new Set(applicationStore.all.map((a) => a.company)));

	let fcomps = $derived(
		applicationStore.all[index].company === ''
			? []
			: [...companies.values()].filter((a) => {
					try {
						// TODO improve this a lot I want to make like matching algo
						return (
							a.match(applicationStore.all[index].company) &&
							a !== applicationStore.all[index].company
						);
					} catch {
						return false;
					}
				})
	);
</script>

<fieldset class="grow">
	<label class="flabel" for="title">Company</label>
	<input
		class="finput"
		id="title"
		bind:value={applicationStore.all[index].company}
		onchange={save}
	/>
	<div class="flex gap-2 flex-wrap">
		{#each fcomps as comp}
			<button
				class="bg-blue-200 px-3 p-1 min-h-0 rounded-lg"
				onclick={() => (applicationStore.all[index].company = comp)}
			>
				{comp}
			</button>
		{/each}
	</div>
</fieldset>
