<i18n>
{
  "en": {
  },
  "de": {
  }
}
</i18n>

<template>
  <v-container fill-height>
    <v-layout>
      <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
          <v-card>
            <v-tabs :value="activeTab" @input="updateActiveTab" :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
              <template v-for="(group, index) in groupChain">
                <v-icon v-if="group.id > 0" :key="2*index">keyboard_arrow_right</v-icon>
                <v-tab :key="2*index+1" ripple>
                  <v-icon v-if="group.id === 0">home</v-icon>
                  <template v-else>{{ group.name ? group.name : group.id }}</template>
                </v-tab>
              </template>
            </v-tabs>
          </v-card>
          <v-tabs-items :value="activeTab" @input="updateActiveTab" touchless>
            <template v-for="(group, index) in groupChain">
              <v-tab-item :key="index">
                <group-module-group-view :tabIndex="index" />
              </v-tab-item>
            </template>
          </v-tabs-items>
      </v-flex>
    </v-layout>
    <group-module-edit-dialog />
  </v-container>
</template>

<script>
import GroupModuleGroupView from '@/components/GroupModuleGroupView'
import GroupModuleEditDialog from '@/components/GroupModuleEditDialog'
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'GroupModule',
  components: {
    GroupModuleGroupView,
    GroupModuleEditDialog
  },
  data () {
    return {
      editDialog: false,
      editId: null,
      editClient: false
    }
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    ...mapState('groups', ['groupChain', 'activeTab'])
  },
  methods: {
    updateActiveTab (tabIndex) {
      this.$store.commit('groups/updateActiveTab', tabIndex)
    }
  },
  created () {
    if (this.$store.state.groups.groupChain == null || this.$store.state.groups.groupChain.length === 0) {
      this.$store.dispatch('groups/loadGroupInChain', { tabIndex: 0, id: 0 })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
