AdventureLog/frontend/src/lib/components/CategoryDropdown.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import type { Category } from '$lib/types';
	import { t } from 'svelte-i18n';

	export let categories: Category[] = [];
	export let selected_category: Category | null = null;
	let new_category: Category = {
		name: '',
		display_name: '',
		icon: '',
		id: '',
		user_id: '',
		num_adventures: 0
	};

	let isOpen = false;

	function toggleDropdown() {
		isOpen = !isOpen;
	}

	function selectCategory(category: Category) {
		console.log('category', category);
		selected_category = category;
		isOpen = false;
	}

	function custom_category() {
		new_category.name = new_category.display_name.toLowerCase().replace(/ /g, '_');
		selectCategory(new_category);
	}

	// function removeCategory(categoryName: string) {
	// 	categories = categories.filter((category) => category.name !== categoryName);
	// 	if (selected_category && selected_category.name === categoryName) {
	// 		selected_category = null;
	// 	}
	// }

	// Close dropdown when clicking outside
	let dropdownRef: HTMLDivElement;

	onMount(() => {
		categories = categories.sort((a, b) => (b.num_adventures || 0) - (a.num_adventures || 0));
		const handleClickOutside = (event: MouseEvent) => {
			if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
				isOpen = false;
			}
		};
		document.addEventListener('click', handleClickOutside);
		return () => {
			document.removeEventListener('click', handleClickOutside);
		};
	});
</script>

<div class="mt-2 relative" bind:this={dropdownRef}>
	<button type="button" class="btn btn-outline w-full text-left" on:click={toggleDropdown}>
		{selected_category && selected_category.name
			? selected_category.display_name + ' ' + selected_category.icon
			: 'Select Category'}
	</button>

	{#if isOpen}
		<div class="absolute z-10 w-full mt-1 bg-base-300 rounded shadow-lg p-2">
			<!-- svelte-ignore a11y-click-events-have-key-events -->
			<!-- svelte-ignore a11y-no-static-element-interactions -->
			<div class="flex items-center gap-2">
				<input
					type="text"
					placeholder="Category Name"
					class="input input-bordered w-full max-w-xs"
					bind:value={new_category.display_name}
				/>
				<input
					type="text"
					placeholder="Icon"
					class="input input-bordered w-full max-w-xs"
					bind:value={new_category.icon}
				/>
				<button on:click={custom_category} type="button" class="btn btn-primary"
					>{$t('adventures.add')}</button
				>
			</div>
			<div class="flex flex-wrap gap-2 mt-2">
				<!-- svelte-ignore a11y-no-static-element-interactions -->
				{#each categories as category}
					<!-- svelte-ignore a11y-click-events-have-key-events -->
					<!-- svelte-ignore a11y-no-static-element-interactions -->
					<div
						class="btn btn-neutral flex items-center space-x-2"
						on:click={() => selectCategory(category)}
					>
						<span>{category.display_name} {category.icon} ({category.num_adventures})</span>
						<!-- <button
						type="button"
						class="btn btn-xs btn-error"
						on:click|stopPropagation={() => removeCategory(category.name)}
					>
						{$t('adventures.remove')}
					</button> -->
					</div>
				{/each}
			</div>
		</div>
	{/if}
</div>