<script lang="ts">
	import { Association, Enum } from '$lib/Filter';
	import type { ListItem } from '$lib/Utils';
	import Select from '$lib/components/Select.svelte';
	import { getContext } from 'svelte';

	export let title: string;
	const context: 'include' | 'exclude' = getContext('filter-type');
	$: exclude = context === 'exclude';

	const id = `${context}-${title.toLowerCase()}`;

	export let options: ListItem[] | undefined;
	export let filter: Association<string> | Enum<string>;
</script>

<div class:exclude class="filter-container">
	<div class="flex gap-2">
		<label for={id}>{title}</label>
		<div class="ml-auto flex items-center gap-1 self-center text-xs">
			{#if filter instanceof Association}
				<button
					type="button"
					title="matches all"
					class:active={filter.mode === 'all'}
					class="btn btn-xs"
					on:click={() => (filter.mode = 'all')}
				>
					&forall;
				</button>
				<button
					type="button"
					title="matches any of"
					class:active={filter.mode === 'any'}
					class="btn btn-xs"
					on:click={() => (filter.mode = 'any')}
				>
					&exist;
				</button>
				<button
					type="button"
					title="matches exactly"
					class:active={filter.mode === 'exact'}
					class="btn btn-xs"
					on:click={() => (filter.mode = 'exact')}
				>
					&equals;
				</button>
				<hr class="border-px border-slate-600" />
			{/if}
			<button
				type="button"
				title="empty"
				class:active={filter.empty}
				class="btn btn-xs"
				on:click={() => (filter.empty = !filter.empty)}
			>
				&empty;
			</button>
		</div>
	</div>
	<Select multi clearable {options} {id} bind:value={filter.values} />
</div>

<style lang="postcss">
	button:hover {
		@apply bg-slate-700;
	}

	button.active {
		@apply bg-indigo-800;
	}

	.filter-container {
		grid-column: var(--grid-column);
	}
</style>
