<div class="options">
    <label class="switch icon">
        <input type="checkbox" bind:checked={show_hidden} />
        <span> show hidden </span>
    </label>
    <div class="field label prefix border">
        <i>search</i>
        <input type="text" bind:value={search_text} />
        <label>Search</label>
    </div>
</div>

<div class="games">
    {#each games.filter((game) => {
        if (search_text.length < 3) return true;
        const target = search_text.toLowerCase();
        return game.name.toLowerCase().includes(target) || game.username
                .toLowerCase()
                .includes(target);
    }) as game}
        {#if show_hidden || !$games_hidden[[game.username, game.bgg_id].join('!')]}
            <div
                transition:slide={{ delay: 250, duration: 300 }}
                class:hidden={$games_hidden[
                    [game.username, game.bgg_id].join('!')
                ]}>
                <div class="grid top-align">
                    <a
                        class="s12 m2"
                        target="_blank"
                        href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
                        <img
                            loading="lazy"
                            src={game.thumbnail}
                            height="80" /></a>
                    <div class="grid s12 m10">
                        <div class="s8 left-align">
                            <strong>
                                <a
                                    class="game-desc"
                                    target="_blank"
                                    href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
                                    {game.name}</a>
                            </strong>
                        </div>
                        <div class="s3">
                            <div>
                                <a
                                    target="_blank"
                                    href={`https://boardgamegeek.com/collection/user/${game.username}?trade=1&subtype=boardgame&ff=1`}
                                    >{game.username}</a>
                                &nbsp;
                                <a
                                    target="_blank"
                                    href={`https://boardgamegeek.com/geekmail/compose?touser=${game.username}`}>
                                    <i>email</i></a>
                            </div>
                            <div class="neighbourhood">
                                {sellers[game.username]?.neighbourhood ?? ''}
                            </div>
                        </div>
                        <div class="s1 right-align">
                            {game.price ? '$' + game.price : ''}
                        </div>
                        <div class="notes s8">
                            {game.notes}
                        </div>
                        <div class="s3 updated-at">
                            {#if game.updated_at}
                                {pretty_date(game.updated_at)}
                            {/if}
                        </div>
                        <div class="s1">
                            <div>
                                <button
                                    class="transparent round"
                                    title="hide game"
                                    on:click={() =>
                                        toggle_game_visibility(
                                            game.username,
                                            game.bgg_id,
                                        )}
                                    >{#if $games_hidden[[game.username, game.bgg_id].join('!')]}<i
                                            >visibility_off</i
                                        >{:else}
                                        <i>visibility</i>
                                    {/if}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="medium-divider"></div>
            </div>
        {/if}
    {/each}
</div>

<script>
    import { getContext } from 'svelte';
    import { slide, fade } from 'svelte/transition';

    export let games;
    export let sellers = {};

    let show_hidden = false;

    let search_text = '';

    // add filter
    // add sort (user, game, price)

    function pretty_date(date) {
        if (!date) return '';

        return date.replace(/T.*/, '');
    }

    const games_hidden = getContext('games_hidden');
    const toggle_game_visibility = games_hidden.toggle;
</script>

<style>
    .games {
        margin-top: 3em;
    }
    a {
        color: var(--primary);
        text-decoration: underline;
    }
    .grid {
        margin-right: 2em;
        font-size: var(--font-size-10);
    }
    .notes {
        margin-top: 1em;
        margin-left: 1em;
    }
    .updated-at {
        font-size: smaller;
        text-align: left;
    }
    .updated-at::before {
        content: 'last update: ';
    }
    .neighbourhood {
        font-size: smaller;
    }
    .hidden {
        opacity: 60%;
    }
    .switch span {
        font-size: var(--font-size-10);
        padding-left: 1em;
    }
    .options {
        display: flex;
        flex-direction: row-reverse;
    }
    .options > div {
        margin-right: 1em;
    }
</style>
