<template>
  <div class="buttons">
    <template v-if="isInConflict">
      <button class="button is-success" 
        @click="cancelRequest">
        <span class="icon is-small">
          <i class="fas fa-hand-peace"></i>
        </span>
      </button>
      <button class="button is-danger" 
        @click="hardenRequest">
        <span class="icon is-small">
          <i class="fas fa-hand-middle-finger"></i>
        </span>
      </button>
    </template>
    <button class="button is-primary"
      @click="putRequest"
      :disabled="isRequested">
      <span class="icon is-small">
        <i class="fas fa-praying-hands"></i>
      </span>
    </button>
  </div>
</template>

<script>
    export default {
        props: {
            // Id of active player
            id: {
                type: Number,
                required: true,
            },
            // Map of all claims
            claims: {
                type: Object,
                required: true,
            },
            // Id of item we are bound to
            item: {
                type: Number,
                required: true,
            }
        },
        computed: {
            // Check if item is requested by active player
            isRequested () {
                if (this.claims[this.id]) {
                    return this.claims[this.id].includes(this.item);
                } else {
                    return false;
                }
            },
            // Check if item is requested by multiple players including active one
            isInConflict () {
                var reqByPlayer = false;
                var reqByOther = false;
                for (var id in this.claims) {
                    const isReq = this.claims[id].includes(this.item);
                    if (isReq) {
                        if (id == this.id) {
                            reqByPlayer = true;
                        } else {
                            reqByOther = true;
                        }
                    }
                }
                return reqByPlayer && reqByOther;
            },
        },
        methods: {
            // The active player claims the item
            putRequest () {
                this.$emit("claim", this.item);
            },
            // The active player withdraws his request
            cancelRequest () {
                this.$emit("unclaim", this.item);
            },
            // The active player insist on his claim
            // TODO: Find a simple and fun system to express
            //       how much each player want an item
            hardenRequest () {
            }
        },
    }
</script>

<style scoped>
    .buttons, .button { margin-bottom: 0; }
</style>
