<script lang="ts">
    import { fly } from "svelte/transition";

    import moves from "../moves";
    import village from "../village";
    import Reward from "./Reward.svelte";
    import { flip } from "svelte/animate";


    $: availableHeroes = $village.heroes.filter(h => !$village.quests.some(q => q.hero === h.id));

    function startQuest(id: number, heroId: number) {
        moves.startQuest(id, heroId);
    }
</script>

<section>
    { #each $village.quests as quest (quest.id) }
    <div
        class="quest"
        in:fly={{ duration: 200, delay: 100, x: -500 }}
        out:fly={{ duration: 200, x: 500 }}
        animate:flip={{ duration: 100 }}
    >
        <p>
            <Reward reward={ quest.reward } />
        </p>
        <p>
            <img src="/img/icons/time.png" alt="Duration">
            { #if quest.started }
            { Math.ceil((quest.remainingTime || 0) / 1000) }
            { :else }
            { quest.duration }
            { #each availableHeroes as hero }
            <button
                on:click={ () => startQuest(quest.id, hero.id) }
            >
                Send { hero.name }
            </button>
            { :else }
            <span>No heroes available</span>
            { /each }
            { /if }
        </p>
    </div>
    { /each }
</section>

<style>
    .quest {
        text-align: left;
    }
</style>
