<template>
  <div class="">
  <nav class="navbar is-info">
    <div class="navbar-brand">
      <p class="navbar-item is-size-4" @click="show_wealth = !show_wealth">{{ app_state.initiated ? player.name : "..." }}</p>
      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
	  <span aria-hidden="true"></span>
	  <span aria-hidden="true"></span>
	  <span aria-hidden="true"></span>
	</a>
    </div>
    <div id="menu" class="navbar-menu">
      <div class="navbar-start" v-if="!playerIsGroup">
     	  <a class="navbar-item" @click="switchPlayerChestVisibility">
     	    {{ app_state.show_player_chest ? 'Coffre de groupe' : 'Mon coffre' }}</a>
      </div>
      <div class="navbar-end">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">Autres</a>
        <div class="navbar-dropdown is-right">
          <a class="navbar-item">History of Loot</a>
          <hr class="navbar-divider">
          <div class="navbar-item heading">Changer</div>
          <a v-for="(p,i) in app_state.player_list" :key="i"
           @click="setActivePlayer(i)"
           href="#" class="navbar-item">
           {{ p.name }}</a>
	</div>
      </div>
      </div>
    </div>
  </nav>
  <section class="box is-shadowless" v-if="show_wealth">
    <Wealth :wealth="wealth" :debt="player.debt"></Wealth>
  </section>
  <section class="card">
    <div class="card-content">
      <Loot v-if="is_adding"></Loot>
      <Chest v-else :player="shownChest"></Chest>
    </div>
    <div class="card-footer" v-if="shownChest == player.id">
      <template v-if="is_adding">
        <a class="card-footer-item">Confirmer</a>
        <a class="card-footer-item" @click="toggleAdding">Annuler</a>
      </template>
      <a v-else class="card-footer-item" @click="toggleAdding">
        + {{ playerIsGroup ? 'Nouveau loot' : 'Acheter' }}
      </a>
    </div>
  </section>
  </div>
</template>

<script>
    import { AppStorage } from '../AppStorage'
    import Chest from './Chest.vue'
    import Wealth from './Wealth.vue'
    import Loot from './Loot.vue'
    /*
    The Player control board.
    */
    export default {
        components: { Chest, Wealth, Loot },
        data () {
            return {
                app_state: AppStorage.state,
                is_adding: false,
                show_wealth: true,
            };
        },
        computed: {
            player () {
            	if (!this.app_state.initiated) return {}
                const idx = this.app_state.player_id;
                return this.app_state.player_list[idx];
            },
            wealth () {
            	if (!this.app_state.initiated) {
            	    return ["-", "-", "-", "-"];
            	} else {
                    const cp = this.player.cp
                    const sp = this.player.sp
                    const gp = this.player.gp
                    const pp = this.player.pp
                    return [cp, sp, gp, pp];
                }
            },
            // Check if the active player is the special 'Group' player
            playerIsGroup () {
                return this.app_state.player_id == 0;
            },
            shownChest () {
           	return this.app_state.show_player_chest
           	    ? this.app_state.player_id
           	    : 0;
            }
        },
        methods: {
            toggleAdding () {
               this.is_adding = !this.is_adding; 
            },
            switchPlayerChestVisibility () {
                AppStorage.switchPlayerChestVisibility();
            },
            hidePlayerChest () {
                if (this.app_state.show_player_chest) {
                    this.switchPlayerChestVisibility();
                }
            },
            setActivePlayer (playerIdx) {
            	var playerIdx = Number(playerIdx);
                AppStorage.setActivePlayer(playerIdx);
                if (playerIdx == 0) { this.hidePlayerChest() }
            },
            closeDropdown () {
                this.show_dropdown = false
            }
        },
    }
</script>

<style scoped>
  .fa-exchange-alt.disabled { opacity: 0.4; }
</style>
