<script>
    import { UIMainPipe, UIObtainedResourcesPipe } from "../../../Game/UIPipes/UIPipes";

    let obtainedWood = 0;
    let obtainedStone = 0;
    let obtainedGrass = 0;
    let obtainedGold = 0;
    let goldPerSec = 0;
    let score = 0;

    let buildMode = false;
    let selectedBuilding = 0;

    UIObtainedResourcesPipe.subscribe((s) => {
        obtainedWood = s.wood;
        obtainedStone = s.stone;
        obtainedGrass = s.grass;
        obtainedGold = s.gold;
        goldPerSec = s.goldPerSec;
        score = s.score;
    });
    
    UIMainPipe.subscribe((s)=>{
        buildMode = s.building;
        selectedBuilding = s.selectedBuilding;
    });
</script>

<div id="state-hud" class="w-full h-full flex flex-col">
    <div class="w-full flex justify-end p-8 text-2xl">
        <div class="w-[300px] flex flex-col items-center bg-slate-900 border-2 border-slate-700 p-4 pointer-events-auto">
            <p>Wood: {obtainedWood.toFixed(2)}</p>
            <p>Stone: {obtainedStone.toFixed(2)}</p>
            <p>Grass: {obtainedGrass.toFixed(2)}</p>
            <p class="text-yellow-400">Gold: {obtainedGold.toFixed(2)}</p>
            <p class="text-yellow-400">Gold / sec: {goldPerSec.toFixed(2)}</p>
            <p class="text-red-400 text-3xl">Score: {score.toFixed(2)}</p>
            <button on:click={()=>{
                UIObtainedResourcesPipe.update((s)=>{
                    s.wood = 0;
                    s.stone = 0;
                    s.grass = 0;
                    s.gold += obtainedWood * 2 + obtainedGrass + obtainedStone * 4;
                });
            }} class="w-full focus:outline-none mt-4 bg-slate-800 hover:bg-slate-800 p-4 text-2xl border-2 border-slate-700 hover:border-amber-600">
                Sell
            </button>
            <button on:click={()=>{
                UIMainPipe.update((s)=>{
                    s.building = !buildMode;
                });
            }} class={"w-full focus:outline-none mt-4 bg-slate-800 hover:bg-slate-800 p-4 text-2xl border-2 hover:border-amber-600 " + (buildMode ? "border-amber-600":"border-slate-700")}>
                Build
            </button>
            {#if buildMode}
            <div class="flex w-full">
                <div class="flex flex-col items-center gap-2 w-full">
                    <button on:click={()=>{
                        UIMainPipe.update((s)=>{
                            s.selectedBuilding = 0;
                        })
                    }} class={"w-full focus:outline-none mt-4 bg-slate-800 hover:bg-slate-800 p-4 text-2xl border-2 hover:border-amber-600 " + (selectedBuilding === 0 ? "border-amber-600":"border-slate-700")}>House #1</button>
                    <button on:click={()=>{
                        UIMainPipe.update((s)=>{
                            s.selectedBuilding = 1;
                        })
                    }} class={"w-full focus:outline-none mt-4 bg-slate-800 hover:bg-slate-800 p-4 text-2xl border-2 hover:border-amber-600 " + (selectedBuilding === 1 ? "border-amber-600":"border-slate-700")}>House #2</button>
                </div>
                <div class="flex flex-col items-center gap-2 w-full">
                    <button on:click={()=>{
                        UIMainPipe.update((s)=>{
                            s.selectedBuilding = 2;
                        })
                    }} class={"w-full focus:outline-none mt-4 bg-slate-800 hover:bg-slate-800 p-4 text-2xl border-2 hover:border-amber-600 " + (selectedBuilding === 2 ? "border-amber-600":"border-slate-700")}>House #3</button>
                    <button on:click={()=>{
                        UIMainPipe.update((s)=>{
                            s.selectedBuilding = 3;
                        })
                    }} class={"w-full focus:outline-none mt-4 bg-slate-800 hover:bg-slate-800 p-4 text-2xl border-2 hover:border-amber-600 " + (selectedBuilding === 3 ? "border-amber-600":"border-slate-700")}>House #4</button>
                </div>
                <div class="flex flex-col items-center gap-2 w-full">
                    <button on:click={()=>{
                        UIMainPipe.update((s)=>{
                            s.selectedBuilding = 4;
                        })
                    }} class={"w-full focus:outline-none mt-4 bg-slate-800 hover:bg-slate-800 p-4 text-2xl border-2 hover:border-amber-600 " + (selectedBuilding === 4 ? "border-amber-600":"border-slate-700")}>House #5</button>
                    <button on:click={()=>{
                        UIMainPipe.update((s)=>{
                            s.selectedBuilding = 5;
                        })
                    }} class={"w-full focus:outline-none mt-4 bg-slate-800 hover:bg-slate-800 p-4 text-2xl border-2 hover:border-amber-600 " + (selectedBuilding === 5 ? "border-amber-600":"border-slate-700")}>House #6</button>
                </div>
            </div>
            {/if}
        </div>
    </div>
</div>
