<script lang="ts">
	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
	import tooltip from '$lib/Tooltip/tooltip';
	import locale from '$stores/locale';
	import { databaseTimeToDate } from '$lib/Utility/time';
	import FallbackImage from '$lib/Image/FallbackImage.svelte';
	import { cdn, thumbnail } from '$lib/Utility/image';
	import FallbackBadge from './FallbackBadge.svelte';
	import type { UserPreferences } from '$lib/Database/SB/User/preferences';
	import type { IndexedBadge } from './badge';

	export let ungroupedBadges: IndexedBadge[];
	export let groupedBadges: [string, IndexedBadge[]][];
	export let categoryFilter: string | null;
	export let editMode: boolean;
	export let preferences: UserPreferences | undefined;
	export let selectedBadge: IndexedBadge | undefined = undefined;
</script>

{#if ungroupedBadges.length === 0}
	<div class="card">
		No due.moe registered badges found for this user. <a
			href={'#'}
			on:click={(e) => e.preventDefault()}
			title="This alert does not include AWC badges."
			use:tooltip>?</a
		>
	</div>
{/if}

{#each groupedBadges as [category, unsortedBadges]}
	{@const badges = unsortedBadges.sort(
		(a, b) => new Date(b.time || 0).getTime() - new Date(a.time || 0).getTime()
	)}

	<details open={categoryFilter ? categoryFilter === category : true}>
		<summary>{category}</summary>

		<p />

		<div class="badges">
			{#each badges as badge}
				<div id={`badge-${badge.id}`}>
					{#if editMode}
						<LinkedTooltip
							content={`${
								badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
							}${badge.description ? `\n${badge.description}` : ''}${
								badge.designer ? `\nDesigner: ${badge.designer}` : ''
							}${badge.source ? `\nSource: ${badge.source}` : ''}`}
							pin={`badge-${badge.id}`}
							pinPosition="top"
							relative
						>
							<a
								href={`#`}
								on:click={() => {
									selectedBadge = badge;

									const hiddenInput = document.querySelector('input[name="hidden"]');

									if (hiddenInput instanceof HTMLInputElement)
										hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
								}}
							>
								<FallbackImage
									source={cdn(thumbnail(badge.image))}
									alternative={badge.description}
									fallback={thumbnail(badge.image)}
									style={badge.hidden || badge.shadow_hidden
										? 'filter: grayscale(100%); opacity: 50%;'
										: ''}
								/>
							</a>
						</LinkedTooltip>
					{:else}
						<FallbackBadge
							{badge}
							bind:selectedBadge
							source={cdn(thumbnail(badge.image))}
							alternative={badge.description}
							fallback={thumbnail(badge.image)}
							hideOnError={preferences ? preferences.hide_missing_badges : true}
							style={badge.hidden || badge.shadow_hidden
								? 'filter: grayscale(100%); opacity: 50%;'
								: ''}
							{preferences}
						/>
					{/if}
				</div>
			{/each}
		</div>
	</details>

	{#if groupedBadges[groupedBadges.length - 1][0] !== category}
		<p />
	{/if}
{/each}
