<template>
  <div class="buttons is-right" >
    <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"
        :class="{'is-outlined': isRequested}"
        :disabled="isRequested"
    >
      <span class="icon is-small">
        <i class="fas fa-praying-hands"></i>
      </span>
    </button>
  </div>
</template>

<script>
    import { AppStorage } from '../AppStorage'
    export default {
        props: ["item"],
        data () { 
            return {
                state: AppStorage.state,
                _requested: false, // Dummy state
            };
        },
        computed: {
            // Check if item is requested by active player
            isRequested () {
                const reqs = this.state.requests[this.state.player_id];
                return reqs.includes(this.item);
            },
            // Check if item is requested by multiple players including active one
            isInConflict () {
                const reqs = this.state.requests;
                const playerId = this.state.player_id;
                var reqByPlayer = false;
                var reqByOther = false;
                for (var key in reqs) {
                    const isReq = reqs[key].includes(this.item);
                    if (isReq) {
                        if (key == playerId) {
                            reqByPlayer = true;
                        } else {
                            reqByOther = true;
                        }
                    }
                }
                return reqByPlayer && reqByOther;
            },
        },
        methods: {
            // The active player claims the item
            putRequest () {
                AppStorage.putRequest(this.item)
            },
            // The active player withdraws his request
            cancelRequest () {
                AppStorage.cancelRequest(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>
