<script lang="ts">
    import moves from "../moves";
    import showOasisPanel from "../stores/showOasisPanel";
    import type { OasisType } from "../types";
    import { getRemainingUnitCount } from "../utils";
    import village from "../village";


    $: region = ($showOasisPanel !== null) ? $village.worldmap[$showOasisPanel] as OasisType : null;
    let numberOfUnits = 0;
    let repeatMission = false;
    $: maximumUnits = getRemainingUnitCount($village, 'soldier');
    $: if (numberOfUnits > maximumUnits) {
        numberOfUnits = maximumUnits || 0;
    }


    function setMaxUnits() {
        numberOfUnits = maximumUnits;
    }


    function pillage() {
        if (!region) return;
        moves.pillage(region.id, numberOfUnits, repeatMission);
    }


    function clear() {
        if (!region) return;
        moves.clear(region.id, numberOfUnits);
    }


    function toggleMissionRepeat() {
        if (!region) return;
        moves.toggleMissionRepeat(region.id);
    }


    function close() {
        showOasisPanel.set(null);
    }
</script>

{ #if region !== null }
<section>
    <div class="oasis-panel">
        <header>
            <h1>
                <img src="/img/icons/{ region.resource }.png" alt="{ region.resource }">
                Oasis
            </h1>
            <span class="close">
                <button on:click={ close }>X</button>
            </span>
        </header>
        { #if region.state.cleared }
        <p>Region cleared</p>
        { :else }
        <p>Defensive strength: { region.strength }</p>
        { /if }
        { #if region.state.mission }
        <div>
            <p>{ region.state.mission.unitCount } soldiers are on a mission here.</p>
            <p>Remaining: { Math.ceil(region.state.mission.remainingTime / 1000) }</p>
            { #if region.state.mission.type === 'pillage' }
            <label>
                <input type="checkbox" checked={ region.state.mission.repeat } on:change={ toggleMissionRepeat }>
                <span title="Send the same troops again when they come back">Repeat</span>
            </label>
            { /if }
        </div>
        { :else if !region.state.cleared }
        <div>
            <input
                type="range"
                name="units"
                min="0"
                max={ maximumUnits }
                bind:value={ numberOfUnits }
            />
            { numberOfUnits }
            <button on:click={ setMaxUnits }>↑</button>
            <button on:click={ clear } disabled={ numberOfUnits === 0 }>Clear</button>
        </div>
        { :else }
        <div>
            <input
                type="range"
                name="units"
                min="0"
                max={ maximumUnits }
                bind:value={ numberOfUnits }
            />
            { numberOfUnits }
            <button on:click={ setMaxUnits }>↑</button>
            <button on:click={ pillage } disabled={ numberOfUnits === 0 }>Pillage</button>
            <label>
                <input type="checkbox" bind:value={ repeatMission }>
                <span title="Send the same troops again when they come back">Repeat</span>
            </label>
        </div>
        { /if }
    </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;
    }

    .oasis-panel {
        background-color: hsl(0, 0%, 20%);
        border: 0.2em solid grey;
        border-radius: .4em;
        width: 80%;
        height: 60%;
    }

    .oasis-panel header {
        position: relative;
    }

    .oasis-panel header .close {
        position: absolute;
        right: 1em;
        top: 0;
    }
</style>
