<i18n>
{
  "en": {
    "name": "Name",
    "description": "Description",
    "ip": "IP Address",
    "title": "Assign groups and clients",
    "assign": "Assign",
    "groups": "Groups",
    "clients": "Clients",
    "success": "Assignment successful.",
    "config": "Config"
  },
  "de": {
    "name": "Name",
    "description": "Beschreibung",
    "ip": "IP Adresse",
    "title": "Gruppen und Clients zuweisen",
    "assign": "Zuweisen",
    "groups": "Gruppen",
    "clients": "Clients",
    "success": "Zuweisung erfolgreich.",
    "config": "Konfiguration"
  }
}
</i18n>

<template>
  <v-card style="overflow: hidden">
    <v-card-title class="dialog-title elevation-3">
      <div class="dialog-title-text">
        <div class="headline non-selectable">{{ $t('title') }}</div>
        <div class="subheading text--secondary pa-2">{{ $t('config') + ': ' + dialog.info.name }}</div>
      </div>
      <v-tabs v-model="tabs" grow slider-color="primary">
          <v-tab><v-icon class="tabbar-tabicon">category</v-icon>{{ selectedGroups.length + ' ' + $t('groups') }}</v-tab>
          <v-tab><v-icon class="tabbar-tabicon">computer</v-icon>{{ selectedClients.length + ' ' + $t('clients') }}</v-tab>
      </v-tabs>
    </v-card-title>
    <v-card-text class="dialog-content">
      <v-tabs-items v-model="tabs">
        <v-tab-item>
          <data-table v-model="selectedGroups" :headers="groupHeaders" :items="groupList" slim :row-count="$vuetify.breakpoint.smAndDown ? -1 : undefined"></data-table>
        </v-tab-item>
        <v-tab-item>
          <data-table v-model="selectedClients" :headers="clientHeaders" :items="clientList" slim :row-count="$vuetify.breakpoint.smAndDown ? -1 : undefined"></data-table>
        </v-tab-item>
      </v-tabs-items>
    </v-card-text>
    <v-divider></v-divider>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
      <v-btn color="primary" @click="saveAssignment">{{ $t('assign') }}</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
import DataTable from '@/components/DataTable'
import { mapState } from 'vuex'

export default {
  name: 'ConfiguratorModuleEntry',
  components: {
    DataTable
  },
  data () {
    return {
      tabs: 0,
      selectedGroups: [],
      selectedClients: []
    }
  },
  computed: {
    ...mapState('configurator', ['dialog']),
    ...mapState('groups', ['groupList', 'clientList']),
    groupHeaders () {
      return [
        { key: 'name', text: this.$t('name') },
        { key: 'description', text: this.$t('description') }
      ]
    },
    clientHeaders () {
      return [
        { key: 'name', text: this.$t('name') },
        { key: 'ip', text: this.$t('ip') }
      ]
    }
  },
  watch: {
    dialog: {
      immediate: true,
      deep: true,
      async handler (value) {
        if (value.show && value.type === 'assign') {
          this.selectedGroups = []
          this.selectedClients = []
          const [ groupsResponse, clientsResponse ] = await Promise.all([
            this.$http.get(`/api/configurator/configs/${value.info.id}/groups`),
            this.$http.get(`/api/configurator/configs/${value.info.id}/clients`)
          ])
          this.selectedGroups = groupsResponse.data
          this.selectedClients = clientsResponse.data
        }
      }
    }
  },
  methods: {
    setDialog (data) {
      this.$store.commit('configurator/setDialog', data)
    },
    async saveAssignment () {
      let url = '/api/configurator/configs/' + this.dialog.info.id
      await Promise.all([
        this.$http.put(url + '/groups', { ids: this.selectedGroups.map(x => x.id) }),
        this.$http.put(url + '/clients', { ids: this.selectedClients.map(x => x.id) })
      ])
      this.$snackbar({ color: 'success', text: this.$t('success') })
      this.setDialog({ show: false })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dialog-title {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.dialog-title >>> .v-tabs .v-tabs__item {
  text-transform: none;
}

.dialog-title-text {
  padding: 16px 16px 0 16px;
}

.dialog-content {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
