<script lang="ts">
    import Banner2 from "$lib/banner2.svelte";
    import Content from "$lib/viewport/content.svelte";
    import { BlogPostTag, posts, type BlogPostLink } from "./posts";
    import BlogGallery from "$lib/lists/blog-gallery.svelte";

    let filter = $state(BlogPostTag.NULL);

    function setFilter(tag: BlogPostTag) {
        filter = tag;
        console.log(filter);
    }

    function filterPosts(): BlogPostLink[] {
        if (filter == BlogPostTag.NULL) {
            return posts;
        }

        let a: BlogPostLink[] = posts.filter((post) => post.post.tags.includes(filter))
        console.log(a);
        return a;
    }
</script>

<svelte:head>
    <title>Blog | denizk0461</title> 
</svelte:head>

<Content>
	<Banner2
		title="Blog"
        banner="robert.webp"
        bannerAlt="View at a tram bridge rising and then curving to the left." />

    <!-- TODO descriptions on filter click -->
    <div class="tag-filter-container">
        {#each Object.values(BlogPostTag) as tag}
            {#if tag == filter}
                <button class="post-tag tag-filter tag-filter-selected" onclick={() => { setFilter(tag) }}>{tag}</button>
            {:else}
                <button class="post-tag tag-filter" onclick={() => { setFilter(tag) }}>{tag}</button>
            {/if}
        {/each}
    </div>

    <BlogGallery posts={filterPosts()} />
</Content>

<style>
    .tag-filter-container {
        display: flex;
        gap: 8px 12px;
        margin: 0 10px 8px;
        flex-wrap: wrap;
    }

    .tag-filter {
        width: fit-content;
        font-size: 0.9rem;
        color: var(--color-text);
        padding: 8px;
        border-radius: 12px;
        cursor: pointer;
        transition: background-color var(--duration-animation) var(--anim-curve);
    }

    .tag-filter-selected {
        background-color: var(--color-highlight-alt);
    }

    .tag-filter:hover {
        background-color: var(--color-highlight-alt);
    }
</style>