<template>
  <div class="column is-one-third-desktop">
    <div id="sidebar" class="card">
      <header id="sidebar-heading" class="card-header">
        <p class="card-header-title">{{ player.name }}</p>
        <div class="dropdown is-right" 
            :class="{ 'is-active': show_dropdown }">
          <div class="dropdown-trigger" ref="dropdown_btn">
            <a id="change_player" class="card-header-icon"
               @click="show_dropdown = !show_dropdown"
               aria-haspopup="true" aria-controls="dropdown-menu">
              <span class="icon is-small">
                <i class="fas fa-exchange-alt"></i>
              </span>
            </a>
          </div>
          <div class="dropdown-menu" id="dropdown-menu" role="menu"
            v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown' }">
            <div class="dropdown-content">
              <a href="#" class="dropdown-item">Féfi</a>
              <a href="#" class="dropdown-item">Lomion</a>
              <a href="#" class="dropdown-item">Oilossë</a>
            </div>
          </div>
        </div>
      </header>
      <div class="card-content">
        <Wealth v-bind:wealth="player.wealth"></Wealth>
      </div>
      <footer class="card-footer">
        <a @click="switchPlayerChestVisibility" href="#" class="card-footer-item is-dark">Coffre</a>
        <a href="#" class="card-footer-item">Argent</a>
        <a href="#" class="card-footer-item disabled">Historique</a>
      </footer>
    </div>
    <div class="card" v-show="app_state.show_player_chest" style="margin-top: 1em;">
      <div class="card-content">
        <Chest player_id="0"></Chest>
      </div>
    </div>
  </div>
</template>

<script>
    import { store } from '../App.vue'
    import Chest from './Chest.vue'
    import Wealth from './Wealth.vue'
    /*
    The Player control board.
    */
    let handleOutsideClick;
    export default {
        components: { Chest, Wealth },
        data () {
            return {
                app_state: store.state,
                player: {
                    name: "Player name",
                    wealth: [1000,100,10,1],
                },
                show_dropdown: false,
            };
        },
        methods: {
            switchPlayerChestVisibility () {
                store.switchPlayerChestVisibility()
            },
            closeDropdown () {
                this.show_dropdown = false
            }
        },
        directives: {
            'closable': {
                bind: function(el, binding, vnode) { 
                    handleOutsideClick = (e) => {
                        console.log("outsideClick");
                        e.stopPropagation();
                        const { exclude, handler } = binding.value;
                        let excludedElClicked = false;
                        exclude.forEach(refName => {
                            if (!excludedElClicked) {
                                const elt = vnode.context.$refs[refName];
                                excludedElClicked = elt.contains(e.target);
                            }
                        });
                    
                        if (!el.contains(e.target) && !excludedElClicked) {
                            console.log('outsideCloseDropdown');
                            vnode.context[handler]()
                        }
                    };
                    document.addEventListener('click', handleOutsideClick);
                    document.addEventListener('touchstart', handleOutsideClick);
                },
                unbind: function() { console.log("unbind"); 
                    document.removeEventListener('click', handleOustideClick);
                    document.removeEventListener('touchstart', handleOustideClick);
                }
            }
        }
    }
</script>

<style scoped>
</style>
