<i18n>
{
  "en": {
    "info": "Info",
    "showall": "All",
    "groups": "Groups",
    "subgroups": "Subgroups",
    "clients": "Clients"
  },
  "de": {
    "info": "Info",
    "showall": "Alle",
    "groups": "Groups",
    "subgroups": "Untergruppen",
    "clients": "Clients"
  }
}
</i18n>

<template>
  <div>
    <div v-if="!settings.collapsedView">

      <v-card v-if="group.id !== 0" style="margin-top: 24px">
        <div class="header-div">
          <div class="header-div-text">
            <v-icon class="mr-2">list_alt</v-icon>
            <span>Info</span>
          </div>
          <v-btn v-if="group.id !== 'create'" icon @click="toggleCollapsedView" :class="{ 'upside-down': settings.collapsedView }">
            <v-icon>expand_less</v-icon>
          </v-btn>
          <v-switch
            v-if="group.id !== 'create'"
            :input-value="group.tabShowAll"
            @change="setShowAll"
            class="show-toggle"
            :label="$t('showall')"
            hide-details
            color="primary"
          ></v-switch>
        </div>
        <group-module-group-info :tabIndex="tabIndex" :group="group" />
      </v-card>

      <v-card v-if="group.id !== 'create'" style="margin-top: 24px">
        <div class="header-div">
          <div class="header-div-text">
            <v-icon class="mr-2">category</v-icon>
            {{ group.subgroups ? group.subgroups.length : 0 }}
            <span class="ml-1">{{ group.id > 0 ? $t('subgroups') : $t('groups') }}</span>
          </div>
          <v-btn v-if="group.id === 0" icon @click="toggleCollapsedView" :class="{ 'upside-down': settings.collapsedView }">
            <v-icon>expand_less</v-icon>
          </v-btn>
          <v-switch
            v-if="group.id === 0"
            :input-value="group.tabShowAll"
            @change="setShowAll"
            class="show-toggle"
            :label="$t('showall')"
            hide-details
            color="primary"
          ></v-switch>
        </div>
        <group-module-group-list :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups || []" />
      </v-card>

      <v-card v-if="group.id !== 'create'" style="margin-top: 24px">
        <div class="header-div">
          <div class="header-div-text">
            <v-icon class="mr-2">computer</v-icon>
            {{ group.clients ? group.clients.length : 0 }}
            <span class="ml-1">{{ $t('clients') }}</span>
          </div>
        </div>
        <group-module-client-list :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients || []" />
      </v-card>
    </div>

    <v-card v-else style="margin-top: 24px">
      <v-tabs v-model="activeTab" grow hide-slider>
        <v-tab v-if="group.id !== 0" class="groupview-tab" :class="(group.id !== 0 && activeTab === 0) ? 'primary--text' : ''">
          <v-icon :color="(group.id !== 0 && activeTab === 0) ? 'primary' : ''">list_alt</v-icon>
          <span class="hidden-xs-only ml-2">Info</span>
        </v-tab>
        <v-tab v-if="group.id !== 'create'" class="groupview-tab" :class="activeTab === (group.id === 0 ? 0 : 1) ? 'primary--text' : ''">
          <v-icon class="mr-2" :color="activeTab === (group.id === 0 ? 0 : 1) ? 'primary' : ''">category</v-icon>
          {{ group.subgroups ? group.subgroups.length : 0 }}
          <span class="hidden-xs-only ml-1">{{ group.id > 0 ? $t('subgroups') : $t('groups') }}</span>
        </v-tab>
        <v-tab v-if="group.id !== 'create'" class="groupview-tab" :class="activeTab === (group.id === 0 ? 1 : 2) ? 'primary--text' : ''">
          <v-icon class="mr-2" :color="activeTab === (group.id === 0 ? 1 : 2) ? 'primary' : ''">computer</v-icon>
          {{ group.clients ? group.clients.length : 0 }}
          <span class="hidden-xs-only ml-1">{{ $t('clients') }}</span>
        </v-tab>

        <v-btn v-if="group.id !== 'create'" icon @click="toggleCollapsedView">
          <v-icon>expand_more</v-icon>
        </v-btn>
        <v-switch
          v-if="group.id !== 'create'"
          :input-value="group.tabShowAll"
          @change="setShowAll"
          class="show-toggle"
          :label="$t('showall')"
          hide-details
          color="primary"
        ></v-switch>

        <v-tabs-items touchless>
          <v-tab-item v-if="group.id !== 0" lazy :transition="false" :reverse-transition="false">
            <group-module-group-info :tabIndex="tabIndex" :group="group" />
          </v-tab-item>
          <v-tab-item v-if="group.id !== 'create'" lazy :transition="false" :reverse-transition="false">
            <group-module-group-list :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups || []" />
          </v-tab-item>
          <v-tab-item v-if="group.id !== 'create'" lazy :transition="false" :reverse-transition="false">
            <group-module-client-list :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients || []" />
          </v-tab-item>
        </v-tabs-items>
      </v-tabs>
    </v-card>
  </div>
</template>

<script>
import GroupModuleGroupInfo from '@/components/GroupModuleGroupInfo'
import GroupModuleGroupList from '@/components/GroupModuleGroupList'
import GroupModuleClientList from '@/components/GroupModuleClientList'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'GroupModuleGroupView',
  props: {
    group: {
      type: Object,
      default: () => {}
    },
    tabIndex: {
      type: Number
    }
  },
  components: {
    GroupModuleGroupInfo,
    GroupModuleGroupList,
    GroupModuleClientList
  },
  data () {
    return {
      activeTab: 0
    }
  },
  computed: {
    ...mapState('groups', ['groupList', 'configList', 'settings'])
  },
  watch: {
    group (newValue, oldValue) {
      if (newValue.gotoInfo) {
        this.activeTab = 0
        return
      }
      if (!newValue.autoGoto) return

      if (newValue.subgroups.length) this.activeTab = (this.group.id === 0 ? 0 : 1)
      else if (newValue.clients.length) this.activeTab = (this.group.id === 0 ? 1 : 2)
      else this.activeTab = 0
    }
  },
  methods: {
    ...mapMutations('groups', ['setDialog', 'setActiveTab', 'adjustTabSlider', 'deleteFromTabChain', 'setCollapsedView']),
    setShowAll (value) {
      this.$store.commit('groups/setShowAll', { index: this.tabIndex, value })
      this.$store.dispatch('groups/loadGroup', { id: this.group.id, tabIndex: this.tabIndex })
    },
    toggleCollapsedView () {
      this.setCollapsedView(!this.settings.collapsedView)
      console.log(this.settings)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.groupview-tab {
  text-transform: none;
  font-weight: bold;
}

.show-toggle {
  padding: 0 16px;
  margin: 0;
  flex: initial;
  display: flex;
  align-items: center;
}

.header-div {
  user-select: none;
  padding-left: 16px;
  height: 48px;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.header-div > .header-div-text {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
