<i18n>
{
  "en": {
    "createUser": "Create user",
    "deleteUsers": "Delete one user | Delete {0} user",
    "email": "E-Mail",
    "id": "ID",
    "name": "Name",
    "username": "Username",
    "users": "Users"
  },
  "de": {
    "createUser": "Benutzer erstellen",
    "deleteUsers": "Lösche einen Benutzer | Lösche {0} Benutzer",
    "email": "E-Mail",
    "id": "ID",
    "name": "Name",
    "username": "Benutzername",
    "users": "Benutzer"
  }
}
</i18n>

<template>
  <v-container fill-height class="">
    <v-layout>
      <v-flex xl10 offset-xl1 lg12>
      <v-card class="tabbar-card">
        <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
          grow
          hide-slider
          v-model="tab"
        >
          <v-tab><v-icon class="tabbar-tabicon">people</v-icon>{{ $t('users') }}</v-tab>
        </v-tabs>
      </v-card>
      <v-tabs-items v-model="tab">
        <v-tab-item>
          <v-subheader>{{ $t('users') }}</v-subheader>

          <v-card>
            <data-table v-model="selectedUsers" :headers="headers" :items="users" @dblclick="editUser($event.id)">
              <div slot="action" slot-scope="row" style="text-align: right">
                <v-btn flat icon color="primary" @click.stop="editUser(row.item.id)" :class="row.index === 0 ? 'tutorial-element label-top-left element-icon' : ''" style="--label-number: '3'"><v-icon>edit</v-icon></v-btn>
              </div>
            </data-table>
          </v-card>
          <div class="text-xs-right">
            <v-btn color="error" flat @click="deleteUsers" :disabled="selectedUsers.length === 0" class="tutorial-element label-left" style="--label-number: '2'">
              <v-icon left>delete</v-icon>{{ $tc('deleteUsers', selectedUsers.length, [selectedUsers.length]) }}
            </v-btn>
            <v-btn color="success" flat @click="editUser(0)" class="tutorial-element label-right" style="--label-number: '1'">
              <v-icon left>edit</v-icon>{{ $t('createUser') }}
            </v-btn>
          </div>

        </v-tab-item>
      </v-tabs-items>
      </v-flex>
    </v-layout>

    <v-dialog
      :value="dialog.show"
      @input="setDialog({ show: $event })"
      :max-width="dialog.type === 'delete' ? '500px' : '500px'"
      scrollable
      :persistent="dialog.type !== 'delete'"
      :fullscreen="$vuetify.breakpoint.smAndDown"
    >
      <user-module-delete v-if="dialog.type === 'delete'" />
      <user-module-edit v-else-if="dialog.type === 'edit'"/>
    </v-dialog>

  </v-container>
</template>

<script>
import { mapGetters, mapState, mapMutations } from 'vuex'
import DataTable from '@/components/DataTable'
import UserModuleDelete from '@/components/UserModuleDelete'
import UserModuleEdit from '@/components/UserModuleEdit'

export default {
  name: 'UserModule',
  components: {
    UserModuleDelete,
    UserModuleEdit,
    DataTable
  },
  data () {
    return {
      tab: 0,
      headers: [
        { text: this.$t('id'), key: 'id', width: '50px', sortType: 'number' },
        { text: this.$t('username'), key: 'username' },
        { text: this.$t('name'), key: 'name' },
        { text: this.$t('email'), key: 'email' },
        { key: 'action' }
      ],
      selectedUsers: [],
      user: ''
    }
  },
  methods: {
    ...mapMutations('users', ['setDialog']),
    deleteUsers () {
      this.setDialog({ show: true, type: 'delete', info: { id: this.user.id, selected: this.selectedUsers } })
    },
    editUser (id) {
      this.setDialog({ show: true, type: 'edit', info: { id: id } })
    }
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    ...mapState('users', ['users', 'dialog'])
  },
  created () {
    this.$store.dispatch('users/loadData')
    this.$http('/api/users/current').then(response => {
      this.user = response.data
    })
  }
}
</script>

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

</style>
