<script lang="ts">
	// eslint-disable-next-line no-undef
	type T = $$Generic;

	export let id: string | null = null;
	export let name: string | null = null;
	export let disabled = false;
	export let available: string[] | { [key: string]: T } = {};
	export let value: T[] = [];
</script>

<div class="flex items-center gap-4">
	<select
		{id}
		{name}
		class="select select-bordered select-xs"
		disabled={disabled || available.length === 0}
		on:change={(e) => {
			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
			// @ts-ignore
			value.push(Object.values(available)[Object.keys(available).indexOf(e.target.value)]);
			value = value;
			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
			// @ts-ignore
			e.target.value = '-';
		}}
	>
		<option selected hidden>-</option>
		{#each Object.keys(available) as badge}
			<option
				hidden={value.find(
					(v) => v === Object.values(available)[Object.keys(available).indexOf(badge)]
				) !== undefined}>{badge}</option
			>
		{/each}
	</select>
	<div class="flex flow flex-wrap gap-2">
		{#each value as badge, i}
			{#if Object.values(available).indexOf(badge) !== -1}
				<div class="badge badge-outline gap-1" class:brightness-[60%]={disabled}>
					<span class:cursor-not-allowed={disabled}>
						<button
							{disabled}
							class:pointer-events-none={disabled}
							on:click={() => {
								value.splice(i, 1);
								value = value;
							}}>✕</button
						>
					</span>
					{Object.keys(available)[Object.values(available).indexOf(badge)]}
				</div>
			{/if}
		{/each}
	</div>
</div>
