<script lang="ts">
	import { page } from '$app/stores';
	import { cn } from '$lib/Utils';
	import type { Puzzle } from '$lib/types';
	import ChevronRight from './Icons/ChevronRight.svelte';

	export let puzzle: Puzzle;

	const chapterId = $page.params.chapterId;

	$: tags = puzzle.tags?.filter((tag) => !['easy', 'medium', 'hard'].includes(tag.name));
</script>

<li
	class={cn(
		'font-code group relative flex h-full w-full rounded-md border-2 bg-primary-700 transition-colors duration-150',
		{
			'border-green-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'easy'),
			'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
			'border-red-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'hard'),
			'border-highlight-primary': !puzzle.tags?.length,
			'hover:bg-primary-600': puzzle.show,
			'opacity-50': !puzzle.show
		}
	)}
>
	{#if puzzle.show}
		<a
			class="flex h-full w-full items-center gap-4 p-4"
			href="/dashboard/chapters/{chapterId}/puzzle/{puzzle.id}"
		>
			<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
				<h2 class="text-base font-semibold">
					{puzzle.name}
					<span class="text-sm text-highlight-secondary">
						({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
					</span>
				</h2>
				<div class="flex items-center gap-x-6">
					{#if puzzle.tags?.length}
						<div class="flex gap-x-2 text-sm">
							{#each puzzle.tags as tag}
								<span
									class="inline-block rounded-md bg-primary-800 px-2 py-1 text-highlight-secondary"
								>
									{tag.name}
								</span>
							{/each}
						</div>
					{/if}
				</div>
			</div>
			<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
				<ChevronRight />
			</span>
		</a>
	{:else}
		<span class="flex h-full w-full items-center gap-4 p-4">
			<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
				<h2 class="text-base font-semibold">
					{puzzle.name}
					<span class="text-sm text-highlight-secondary">
						({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
					</span>
				</h2>
				<div class="flex items-center gap-x-6">
					{#if puzzle.tags?.length}
						<div class="flex gap-x-2 text-sm">
							{#each puzzle.tags as tag}
								<span
									class="inline-block rounded-md bg-primary-800 px-2 py-1 text-highlight-secondary"
								>
									{tag.name}
								</span>
							{/each}
						</div>
					{/if}
				</div>
			</div>
		</span>
	{/if}
</li>
