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

	let { save, company = $bindable() }: { company: string; save: () => void } = $props();

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

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

<fieldset class="grow">
	<label class="flabel" for="title">Company</label>
	<input class="finput" id="title" bind:value={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={() => company = comp}>
				{comp}
			</button>
		{/each}
	</div>
</fieldset>
