<script lang="ts">
    import { createBuilding } from "../create";
    import buildings from "../data/buildings";
    import { getTimeToBuild } from "../logic";
    import moves from "../moves";
    import showBuildingCreator from "../stores/showBuildingCreator";
    import { canPayBuildingCost, getPrettyTime, getTownhall } from "../utils";
    import village from "../village";
    import Cost from "./Cost.svelte";

    function close() {
        showBuildingCreator.set(null);
    }


    function build(type: string) {
        if ($showBuildingCreator === null) {
            return;
        }

        if (moves.build(type, $showBuildingCreator)) {
            close();
        }
    }

    $: constructible = buildings
        .filter(b => !b.autoBuilt)
        .filter(b => !(b.unique && $village.buildings.some(b2 => b2.type === b.type)))
        .filter(b => !b.requiredTownhallLevel || getTownhall($village).level >= b.requiredTownhallLevel)
        .map(b =>{
            const building = createBuilding(b.type);
            building.level = 0;
            return building;
        })
        .sort((a, b) => a.requiredTownhallLevel - b.requiredTownhallLevel);
</script>

{ #if $showBuildingCreator !== null }
<section>
    <div class="building-creator">
        <header>
            <h1>Choose a new building</h1>
            <span class="close">
                <button on:click={ close }>X</button>
            </span>
        </header>
        <div class="buildings">
            { #each constructible as building }
            <div class="building">
                <div class="content">
                    <img src="/img/buildings/{building.type}.png" alt="">
                    <div>
                        <h3>{ building.name }</h3>
                        <p>{ building.description.short }</p>
                    </div>
                </div>
                <Cost cost={ building.cost(1) } />
                <button
                    on:click={ () => build(building.type) }
                    disabled={ !canPayBuildingCost($village, building) }
                >
                    Build ({ getPrettyTime(getTimeToBuild($village, building, 1)) })
                </button>
            </div>
            { /each }
        </div>
    </div>
</section>
{ /if }

<style>
    section {
        background-color: hsl(0, 0%, 10%, 0.8);
        display: grid;
        place-items: center;
        height: 100vh;
        left: 0;
        position: absolute;
        top: 0;
        width: 100vw;
    }

    .building-creator {
        background-color: hsl(0, 0%, 20%);
        border: 0.2em solid hsl(0, 0%, 40%);
        border-radius: .4em;
        box-sizing: border-box;
        width: 80%;
        height: 60%;
    }

    .building-creator header {
        align-items: center;
        border-bottom: 2px solid hsl(0, 0%, 40%);
        box-sizing: border-box;
        display: flex;
        height: 15%;
        justify-content: center;
        position: relative;
    }

    .building-creator header h1 {
        margin: 0;
    }

    .building-creator header .close {
        position: absolute;
        right: 1em;
        top: 1em;
    }

    .building-creator .buildings {
        box-sizing: border-box;
        display: grid;
        gap: 1em;
        grid-template-columns: repeat(4, 1fr);
        height: 85%;
        overflow: hidden;
        overflow-y: scroll;
        padding: 0.5em;
    }

    .building {
        background-color: hsl(0, 0%, 22%);
        box-shadow: 0 0 0.2em hsl(0, 0%, 15%);
        padding: 0.4em 0.2em;
    }

    .building .content {
        display: flex;
        text-align: left;
    }

    .building .content img {
        height: 10em;
    }

    .building .content h3 {
        margin: 0;
    }
</style>
