<template>
  <section class="level is-mobile">
    <div class="level-left">
      <div class="level-item">
	    <span class="icon is-large" @click="editing = !editing">
	      <i class="fas fa-2x fa-piggy-bank"></i>
	    </span>
      </div>
      <template v-if="editing">
      <div class="level-item">
        <div class="field has-addons">
          <p class="control">
    	    <input class="input" type="number" step="0.01" v-model="edit_value"></input>
          </p>
          <p class="control">
            <a class="button is-static">po</a>
          </p>
        </div>
      </div>
      <div class="level-item">
        <button class="button is-danger" @click="updateWealth()">
          Modifier
        </button>
      </div>
      </template>
      <template v-else>
      <div class="level-item ">
       <p class="is-size-4">{{ pp }}</p>
       <p class="heading">PP</p>
      </div>
     <div class="level-item ">
       <p class="is-size-4">{{ gp }}</p>
       <p class="heading">PO</p>
     	</div>
     <div class="level-item ">
       <p class="is-size-4 has-text-grey-light">{{ sp }}</p>
       <p class="heading">PA</p>
       </div>
     <div class="level-item ">
       <p class="is-size-4 has-text-grey-light">{{ cp }}</p>
       <p class="heading">PC</p>
       </div>
    </template>
    </div>
    <div class="level-right" v-if="debt">
      <div class="level-item">
        <p class="heading is-size-4 has-text-danger">Dette: {{ debt }}gp </p>
      </div>
    </div>
    </div>
  </section>
</template>

<script>
    export default {
        props: ["wealth", "debt"],
        data () { 
            return {
              editing: false,
              edit_value: 0,
            }; 
        },
        methods: {
            updateWealth () {
                this.$emit("update", this.edit_value);
                this.resetValues();
            },
            resetValues () {
              this.editing = false;
              this.edit_value = 0;
            }
        },
        computed: {
            pp () {
                return this.wealth[3];
            },
            gp () {
                const gp = this.wealth[2];
                if (gp < 10) {
                    return "0" + gp;
                } else {
                    return gp;
                }
            },
            sp () {
                return this.wealth[1];
            },
            cp () {
                return this.wealth[0];
            },
        }
    }
</script>

<style scoped>
    .input { max-width: 9em; }
</style>
