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

<template>
  <v-dialog
    :value="$store.state.permissions.grantRevoke"
    @input="$store.commit('permissions/setGrantRevoke', $event)"
    max-width="700px"
    scrollable
  >
    <v-card>
      <v-card-title style="padding: 0px">
        <v-stepper v-model="step" horizontal  style="width: 100%; background: transparent;" class="elevation-3">
          <v-stepper-header>
            <v-stepper-step
              :complete="stepCompleted >= 1"
              step="1"
              :editable="stepCompleted >= 1"
              edit-icon="check"
            >
              {{ $t('select_roles') }}
            </v-stepper-step>
            <v-divider></v-divider>
            <v-stepper-step
              :complete="stepCompleted >= 2"
              step="2"
              :editable="stepCompleted >= 2"
              edit-icon="check"
            >
              {{ $t('confirm_selection') }}
            </v-stepper-step>
          </v-stepper-header>
        </v-stepper>
      </v-card-title>
      <v-card-text style="height: 500px;">
        <v-form v-model="valid" ref="form" @submit.prevent="submit" lazy-validation>
          <v-stepper v-model="step" horizontal style="width: 100%; background: transparent" class="elevation-0">
            <v-stepper-items>
              <v-stepper-content step="1">
                <v-data-table
                  class="group-table"
                  :headers="roleHeaders"
                  :items="roles"
                  item-key="id"
                  hide-actions
                  select-all
                  :value="rolesSelected"
                  @input="setRolesSelected($event)"
                >
                  <template slot="items" slot-scope="props">
                    <tr @click="props.selected = !props.selected">
                      <td>
                        <v-checkbox
                          color="primary"
                          v-model="props.selected"
                          hide-details
                          @click.native.stop
                        ></v-checkbox>
                      </td>
                      <td>{{ props.item.id }}</td>
                      <td>{{ props.item.name }}</td>
                      <td>{{ props.item.descr }}</td>
                    </tr>
                  </template>
                </v-data-table>
              </v-stepper-content>
              <v-stepper-content step="2">
                <!-- List of selected Users and selected Roles here -->
                <v-layout row wrap>
                  <v-flex xs12 class="list-content">
                    <v-list two-line subheader>
                      <v-subheader inset>{{ $t('roles') }}</v-subheader>
                      <v-divider></v-divider>
                      <v-list-tile
                        v-for="role in rolesSelected"
                        :key="role.id"
                      >
                        <v-list-tile-content>
                          <v-list-tile-title>{{ role.name }}</v-list-tile-title>
                          <v-list-tile-sub-title>{{ role.descr }}</v-list-tile-sub-title>
                        </v-list-tile-content>
                      </v-list-tile>
                    </v-list>
                  </v-flex>
                  <v-flex xs12 class="list-content">
                    <v-list>
                      <v-subheader inset>{{ $t('users') }}</v-subheader>
                      <v-divider></v-divider>
                      <v-list-tile
                        v-for="user in selectedUsers"
                        :key="user.username"
                      >
                        <v-list-tile-content>
                          <v-list-tile-title>{{ user.username }}</v-list-tile-title>
                          <v-list-tile-sub-title>{{ user.name }}</v-list-tile-sub-title>
                        </v-list-tile-content>
                      </v-list-tile>
                    </v-list>
                  </v-flex>
                </v-layout>
              </v-stepper-content>
            </v-stepper-items>
          </v-stepper>
        </v-form>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-flex xl10 offset-xl1 lg12 text-xs-right>
          <v-btn flat @click.native="$store.commit('permissions/setGrantRevoke', false )">{{ $t('cancel') }}</v-btn>
          <v-btn color="primary" v-show="step == 1" @click.native="completeStepOne()">{{ $t('continue') }}</v-btn>
          <v-btn type="submit" @click="submit" v-show="step == 2" v-if="grant" class="success">{{ $t('grant') }}</v-btn>
          <v-btn type="submit" @click="submit" v-show="step == 2" v-else class="error">{{ $t('revoke') }}</v-btn>
        </v-flex>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'PermissionModuleGrantRevoke',
  props: ['grant'],
  data () {
    return {
      valid: true,
      step: 1,
      stepCompleted: 0,
      rolesSelected: [],
      roleHeaders: [
        { text: 'ID', value: 'id' },
        { text: 'Name', value: 'name' },
        { text: 'Description', value: 'descr' }
      ]
    }
  },
  methods: {
    submit (event) {
      const filteredRoles = this.rolesSelected.map(x => x.id)
      const filteredUsers = this.selectedUsers.map(x => x.id)
      if (this.grant) {
        this.$http.post('/api/user/grantRoles', {
          userIds: filteredUsers,
          roleIds: filteredRoles
        }).then(response => {
          console.log('TODO: Implement snackbar and print roles granted successfully msg.')
          this.$store.dispatch('permissions/loadData')
          this.$store.commit('permissions/setGrantRevoke', false)
          this.$store.commit('permissions/setSelectedUsers', [])
        }).catch(error => {
          console.log(error)
        })
      } else {
        this.$http.post('/api/user/revokeRoles', {
          userIds: filteredUsers,
          roleIds: filteredRoles
        }).then(response => {
          console.log('TODO: Implement snackbar and print roles revoked successfully msg.')
          this.$store.dispatch('permissions/loadData')
          this.$store.commit('permissions/setGrantRevoke', false)
          this.$store.commit('permissions/setSelectedUsers', [])
        }).catch(error => {
          console.log(error)
        })
      }
    },
    completeStepOne () {
      this.step = 2
      this.stepCompleted = Math.max(1, this.stepCompleted)
    },
    setRolesSelected (value) {
      this.rolesSelected = value
    }
  },
  computed: {
    ...mapState('permissions', ['roles', 'selectedUsers'])
  },
  beforeMount () {
  },
  watch: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list-content {
  margin-bottom: 10px;
}
</style>
