<template lang="html">
  <div id="{{id}}" data-cpt-type="menu-bar" class="menu-bar pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list" @click="clickOnTab">
      <li class="pure-menu-item" v-for="one in builtTabs">
        <a href="#{{one.name}}"
        data-name="{{one.name}}"
        data-index="{{one.index}}"
        :class="one.selected ? 'pure-menu-link selected' : 'pure-menu-link'" >{{one.name}}</a>
      </li>
    </ul>

    <aside class="action-button" v-if="showActionButton" @click="clickOnAction">
      <slot>
        <button class="pure-button pure-button-primary">{{actionButtonText}}</button>
      </slot>
    </aside>
  </div>
</template>

<style lang="sass">
   @import "../../styles/core/base.scss";

  .menu-bar{
    background: rgba(255,255,255,0.6);
    border-bottom: 1px solid #e5e5e5;
    padding:8px 8px;
    text-align:center;

    .pure-menu-link.selected{
      background-color:#ddd;
    }

    .action-button{
      float:right;
    }
  }
</style>

<script>

export default {
  props:{
    id:String,
    tabs:{
      type:Array,
      default:[],
    },
    actionButtonText:{
      type:String,
    },
    onClick:{
      type:Function,
      default:_=>_
    },
    onClickAction:{
      type:Function,
      default:_=>_,
    }
  },
  data: function () {
    return {
      selectIndex:undefined,
    }
  },
  computed: {
    showActionButton(){
      return !!this.actionButtonText;
    },
    builtTabs(){
      return this.tabs.map((tab,i)=>{

        return {
          name:tab.name,
          index:i,
          selected : i === this.selectIndex
        }
      });
    }
  },
  ready: function () {},
  attached: function () {},
  methods: {
    clickOnTab(e) {
      var {name,index} = e.target.dataset;
      index = parseInt(index);
      if(index === this.selectIndex){
        this.selectIndex = false;
        name = '';
      }else{
        this.selectIndex = index;
      }

      this.onClick(e,name);
    },
    clickOnAction(e){

      this.onClickAction(e);
    }
  },
  components: {}
}
</script>
