<i18n>
{
  "en": {
    "title": {
      "delete": {
        "group": "Delete this group? | Delete these {0} groups?",
        "client": "Delete this client? | Delete these {0} clients?"
      },
      "remove": {
        "group": "Remove this subgroup? | Remove these {0} subgroups?",
        "client": "Remove this client? | Remove these {0} clients?"
      },
      "add": {
        "group": "Add groups | Add this group? | Add these {0} groups?",
        "client": "Add clients | Add this client? | Add these {0} clients?"
      }
    },
    "success": {
      "delete": {
        "client": "Successfully deleted client | Successfully deleted {0} clients",
        "group": "Successfully deleted group | Successfully deleted {0} groups"
      },
      "remove": {
        "client": "Successfully removed client | Successfully removed {0} clients",
        "group": "Successfully removed group | Successfully removed {0} groups"
      },
      "add": {
        "client": "Successfully added client | Successfully added {0} clients",
        "group": "Successfully added group | Successfully added {0} groups"
      }
    },
    "deletePermanently": {
      "group": "Permanently delete group | Permanently delete groups",
      "client": "Permanently delete client | Permanently delete clients"
    },
    "new": "New",
    "id": "ID",
    "name": "Name"
  },
  "de": {
    "title": {
      "delete": {
        "group": "Diese Gruppe löschen? | Diese {0} Gruppen löschen?",
        "client": "Diesen Clienten löschen? | Diese {0} Clienten löschen?"
      },
      "remove": {
        "group": "Diese Untergruppe entfernen? | Diese {0} Untergruppen entfernen?",
        "client": "Diesen Clienten entfernen? | Diese {0} Clienten entfernen?"
      },
      "add": {
        "group": "Gruppen hinzufügen | Diese Gruppe hinzufügen? | Diese {0} Gruppen hinzufügen?",
        "client": "Clienten hinzufügen | Diesen Clienten hinzufügen? | Diese {0} Clienten hinzufügen?"
      }
    },
    "success": {
      "delete": {
        "client": "Client erfolgreich gelöscht | {0} Clienten erfolgreich gelöscht",
        "group": "Gruppe erfolgreich gelöscht | {0} Gruppen erfolgreich gelöscht"
      },
      "remove": {
        "client": "Client erfolgreich entfernt | {0} Clienten erfolgreich entfernt",
        "group": "Gruppe erfolgreich entfernt | {0} Gruppen erfolgreich entfernt"
      },
      "add": {
        "client": "Client erfolgreich hinzugefügt | {0} Clienten erfolgreich hinzugefügt",
        "group": "Gruppe erfolgreich hinzugefügt | {0} Gruppen erfolgreich hinzugefügt"
      }
    },
    "deletePermanently": {
      "group": "Gruppe dauerhaft löschen | Gruppen dauerhaft löschen",
      "client": "Client dauerhaft löschen | Clienten dauerhaft löschen"
    },
    "new": "Neu",
    "id": "ID",
    "name": "Name"
  }
}
</i18n>

<template>
  <v-dialog
    :value="dialog.show"
    @input="setDialog({ show: $event })"
    :max-width="action === 'add' ? '1000px' : '500px'"
    scrollable
    :persistent="action === 'add'"
  >
    <v-card>
      <v-card-title primary-title class="dialog-title elevation-3">
        <div class="headline">{{ title }}</div>
        <v-spacer></v-spacer>
        <v-btn v-if="action === 'add'" class="new-button" flat color="success" @click="newItem">
          <v-icon left>create</v-icon>{{ $t('new') }}
        </v-btn>
      </v-card-title>
      <v-card-text  style="height: 616px" v-if="action === 'add'" class="table-container">
        <v-divider></v-divider>
        <component-search-table v-model="selected" :headers="headers" :items="items" select-all>
          <template slot="items" slot-scope="row">
            <tr :style="row.color" @click="row.data.selected = !row.data.selected">
              <td>
                <v-checkbox
                  color="primary"
                  v-model="row.data.selected"
                  hide-details
                ></v-checkbox>
              </td>
              <td>{{ row.data.item.id }}</td>
              <td>{{ row.data.item.name }}</td>
            </tr>
          </template>
        </component-search-table>
      </v-card-text>
      <v-card-text v-else class="selected-list">
        <v-checkbox
          class="delete-checkbox"
          v-if="dialog.info.action === 'remove'"
          :label="$tc('deletePermanently.' + dialog.info.type, selectedCount)"
          color="error"
          v-model="deleteInsteadOfRemove"
          hide-details
        ></v-checkbox>
        <div v-for="item in dialog.info.selected" class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }}</div>
      </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="action === 'add' ? 'success' : 'error'" @click="submitAction">{{ $t(action) }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import ComponentSearchTable from '@/components/ComponentSearchTable'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'GroupModuleDialog',
  components: {
    ComponentSearchTable
  },
  data () {
    return {
      selected: [],
      deleteInsteadOfRemove: false
    }
  },
  computed: {
    ...mapState('groups', ['dialog', 'tabChain']),
    headers () {
      return [
        { text: this.$t('id'), value: 'id' },
        { text: this.$t('name'), value: 'name', width: '100000px' }
      ]
    },
    action () {
      return this.dialog.info.action === 'remove' && this.deleteInsteadOfRemove ? 'delete' : this.dialog.info.action
    },
    selectedCount () {
      return this.action === 'add' ? this.selected.length : (this.dialog.info.selected ? this.dialog.info.selected.length : 0)
    },
    title () {
      return this.$tc('title.' + this.action + '.' + this.dialog.info.type, this.selectedCount, [this.selectedCount])
    },
    items () {
      if (this.dialog.info.type === 'group') return this.$store.state.groups.groupList
      if (this.dialog.info.type === 'client') return this.$store.state.groups.clientList
    }
  },
  methods: {
    ...mapMutations('groups', ['setActiveTab', 'setTab']),
    setDialog (data) {
      this.$store.commit('groups/setDialog', data)
      if (data.show === false) {
        this.selected = []
        this.search = ''
        this.deleteInsteadOfRemove = false
      }
    },
    submitAction () {
      const actionMap = {
        'delete': { 'group': 'deleteGroups', 'client': 'deleteClients' },
        'remove': { 'group': 'removeSubroups', 'client': 'removeClients' },
        'add': { 'group': 'addSubgroups', 'client': 'addClients' }
      }
      var count = this.action === 'add' ? this.selected.length : this.dialog.info.selected.length
      var data = { ...this.dialog.info, callback: () => this.$snackbar({
        color: 'success',
        text: this.$tc('success.' + this.action + '.' + this.dialog.info.type, count, [count])
      }) }
      if (this.action === 'add') data.selected = this.selected
      this.$store.dispatch('groups/' + actionMap[this.action][this.dialog.info.type], data)
      this.setDialog({ show: false })
    },
    newItem () {
      this.setDialog({ show: false })
      var item = { id: 'create', tabType: this.dialog.info.type }
      if (this.dialog.info.type === 'group') item.parents = [this.tabChain[this.dialog.info.tabIndex]]
      else if (this.dialog.info.type === 'client') item.groups = [this.tabChain[this.dialog.info.tabIndex]]
      this.setTab({ index: this.dialog.info.tabIndex + 1, item })
      this.setActiveTab(this.dialog.info.tabIndex + 1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table-container {
  padding: 0;
}
.dialog-title {
  z-index: 1;
}
.new-button {
  margin-top: 0;
  margin-bottom: 0;
}
.delete-checkbox {
  margin-top: 0;
  margin-bottom: 20px;
}
.selected-list {
  padding: 30px;
}
</style>
