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

    export let region: OasisType;


    let numberOfUnits = 0;
    $: maximumUnits = getRemainingUnitCount($village, 'soldier');
    $: if (numberOfUnits > maximumUnits) {
        numberOfUnits = maximumUnits || 0;
    }


    function setMaxUnits() {
        numberOfUnits = maximumUnits;
    }


    function pillage() {
        moves.pillage(region.state.index, numberOfUnits);
    }
</script>

<div>
    <h2>
        <img src="/img/icons/{ region.resource }.png" alt="{ region.resource }">
        Oasis
        (→ { region.distance })
    </h2>
    { #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>
    </div>
    { :else }
    <div>
        <input
            type="range"
            name="units"
            min="0"
            max={ maximumUnits }
            bind:value={ numberOfUnits }
        />
        <input
            type="number"
            name="units"
            min="0"
            max={ maximumUnits }
            bind:value={ numberOfUnits }
        />
        <button on:click={ setMaxUnits }>↑</button>
        <button on:click={ pillage } disabled={ numberOfUnits === 0 }>Pillage</button>
    </div>
    { /if }
</div>

<style>
    h2 {
        align-items: center;
        display: flex;
        gap: 0.4em;
    }
</style>
