<template>
  <div v-bind:class="[componentClass, listVisible && 'c-list-visible']">
    <div class="capcont">
      <div class="caption">{{caption}}</div>
      <div class="selvalue">{{getLayoutActiveTranslatedDesc}}</div>
      <i v-on:click="toggleList()"></i>
      <c-btna class="saveLayout"
        :appWindowIdent="appWindowIdent"
        :dataSetIdent="dataSetIdent"
        actionIdent="saveLayout"
        :showLabel="false"
      />
    </div>
    <ul class="c-list">
      <li v-for="(obj, index) in this.getLayoutIdents" v-bind:key="index" v-on:click="onItemClick(obj.layoutIdent)" v-bind:class="{'active' : (obj.layoutIdent==getLayoutIdent)}">
        <div class="cap">{{obj.layoutTranslatedDesc}}</div>
      </li>
    </ul>
  </div>
</template>

<script>

import base from './c-base'
const props = {
  caption: {
    type: String,
    default: 'Widok:'
  }
}

import { mapGetters, mapActions } from 'vuex'

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-layouts-manager',
      listVisible: false
    }
  },
  props,
  created() {
    // we register the item-template component here
    // without having to declare it in the components() section
  },
  computed: {
    ...mapGetters('csAppWindowsUtils', [
      'getDataSetLayoutIdents',
      'getDataSetLayoutIdent',
      'getDataSetLayoutActiveTranslatedDesc'
    ]),
    getLayoutIdents: function () {
        return this.getDataSetLayoutIdents(this.dataSet)
    },
    getLayoutIdent: function () {
      return this.getDataSetLayoutIdent(this.dataSet)
    },
    getLayoutActiveTranslatedDesc: function () {
      return this.getDataSetLayoutActiveTranslatedDesc(this.dataSet)
    },
    getLayoutActiveIdent: function () {
      return this.getDataSetLayoutIdent(this.dataSet)
    }
  },
  methods: {
    ...mapActions('csAppWindowsUtils', [
      'setDataSetLayoutIdent'
    ]),
    onItemClick: function (layoutIdent) {
      this.setDataSetLayoutIdent({appWindowIdent: this.appWindowIdent, dataSet: this.dataSet, layoutIdent: layoutIdent})
      if(this.listVisible) this.listVisible = false
    },
    toggleList: function () {
      this.listVisible = !this.listVisible
    }
  },
}</script>
