<i18n>
{
  "en": {
    "title": "Boot Selection Server",
    "account": "Account",
    "settings": "Settings",
    "logout": "Logout"
  },
  "de": {
    "title": "Boot Auswahl Server",
    "account": "Konto",
    "settings": "Einstellungen",
    "logout": "Abmelden"
  }
}
</i18n>

<template>
  <v-app :dark="settings.dark">
    <v-touch
      @panstart="drawerDragStart"
      @panmove="drawerDragMove"
      @panend="drawerDragEnd"
      @pancancel="drawerDragEnd"
      :pan-options="{ direction: 'horizontal', threshold: 0 }"
      class="drawer-handle-closed"
    ></v-touch>
    <v-navigation-drawer
      style="z-index: 11;"
      class="drawer non-selectable"
      :style="drawerDraggingStyle"
      persistent
      :mini-variant="desktop && drawerMini"
      :clipped="settings.clipped && desktop"
      v-model="drawerOpen"
      fixed
      width="250"
      app
      touchless
    >
      <v-touch
        @panstart="drawerDragStart"
        @panmove="drawerDragMove"
        @panend="drawerDragEnd"
        @pancancel="drawerDragEnd"
        :pan-options="{ direction: 'horizontal', threshold: 0 }"
        class="drawer-handle-open"
      >
        <div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
        <v-list>
          <v-list-tile ripple v-for="module in modules" :key="module.name" :to="{ name: module.name }">
            <v-list-tile-action>
              <v-icon v-html="module.icon"></v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title v-text="$t('$dashboardModules.' + module.name)"></v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-touch>
    </v-navigation-drawer>

    <v-toolbar dark app :clipped-left="settings.clipped" class="non-selectable" style="z-index: 10;">
      <v-toolbar-side-icon class="drawer-icon" @click.stop="toggleDrawer"></v-toolbar-side-icon>
      <div class="logo"><img class="non-draggable hidden-md-and-down" src="@/assets/logo.svg" /></div>
      <v-spacer></v-spacer>
      <v-btn v-if="devMode" icon @click="$store.commit('saveSetting', { name: 'locale', value: settings.locale === 'en' ? 'de' : 'en' })"><v-icon>language</v-icon></v-btn>
      <v-btn v-if="devMode" icon @click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })"><v-icon>invert_colors</v-icon></v-btn>
      <notifications-alerts style="margin-right: 20px"></notifications-alerts>
      <v-toolbar-items>
        <v-menu offset-y>
          <v-btn class="user-button" flat slot="activator">
            <v-icon left>account_circle</v-icon>{{ userFullName }}
          </v-btn>
          <v-list>
            <v-list-tile to="/dashboard/account" active-class="">
              <v-icon class="user-menu-icon">perm_identity</v-icon>
              <v-list-tile-title>{{ $t('account') }}</v-list-tile-title>
            </v-list-tile>
            <v-list-tile to="/dashboard/settings" active-class="">
              <v-icon class="user-menu-icon">settings</v-icon>
              <v-list-tile-title>{{ $t('settings') }}</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="logout">
              <v-icon class="user-menu-icon">power_settings_new</v-icon>
              <v-list-tile-title>{{ $t('logout') }}</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>
      </v-toolbar-items>
    </v-toolbar>

    <v-content>
      <router-view />
    </v-content>

    <notifications-snackbars></notifications-snackbars>
  </v-app>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import NotificationsAlerts from '@/components/NotificationsAlerts'
import NotificationsSnackbars from '@/components/NotificationsSnackbars'
import AccountModule from '@/components/AccountModule'
import SettingsModule from '@/components/SettingsModule'
import dashboardModules from '@/config/dashboard'

export default {
  name: 'DashboardPage',
  routes () {
    return [
      { path: 'account', component: AccountModule },
      { path: 'settings', component: SettingsModule }
    ]
  },
  components: {
    NotificationsAlerts,
    NotificationsSnackbars
  },
  data () {
    return {
      modules: dashboardModules,
      dragging: false,
      drawerWidth: 250,
      drawerTranslateX: 0,
      drawerMini: localStorage.getItem('drawerMini') === 'true',
      drawerOpen: localStorage.getItem('drawerOpen') !== 'false',
      userFullName: '',
      clientCount: 0
    }
  },
  computed: {
    ...mapState(['settings']),
    mini () { return this.settings.mini },
    desktop () { return this.$vuetify.breakpoint.lgAndUp },
    drawerDraggingStyle () {
      var style = {}
      if (this.dragging) {
        style.transition = 'none'
        if (this.settings.mini && this.desktop) style.width = this.drawerWidth + 'px'
        else style.transform = 'translateX(' + this.drawerTranslateX + 'px)'
      }
      return style
    },
    devMode () { return localStorage.getItem('dev') === 'true' }
  },
  watch: {
    mini (value) {
      if (value) {
        this.drawerMini = !this.drawerOpen
        this.drawerOpen = true
      } else {
        this.drawerOpen = !this.drawerMini
        this.drawerMini = false
      }
    },
    drawerMini (value) { localStorage.setItem('drawerMini', value) },
    drawerOpen (value) { localStorage.setItem('drawerOpen', value) }
  },
  methods: {
    ...mapMutations(['setLoginRedirect']),
    toggleDrawer () {
      if (this.settings.mini && this.desktop) this.drawerMini = !this.drawerMini
      else this.drawerOpen = !this.drawerOpen
    },
    drawerDragStart (event) {
      if (this.settings.mini && this.desktop) this.drawerWidth = this.drawerStartWidth = this.drawerMini ? 80 : 250
      else this.drawerTranslateStartX = this.drawerTranslateX = this.drawerOpen ? 0 : -250
      this.dragging = true
    },
    drawerDragMove (event) {
      if (this.settings.mini && this.desktop) {
        let newX = this.drawerStartWidth + event.deltaX
        if (newX >= 80 && newX <= 250) this.drawerWidth = newX
      } else {
        let newX = this.drawerTranslateStartX + event.deltaX
        if (newX <= 0 && newX >= -250) this.drawerTranslateX = newX
      }
    },
    drawerDragEnd (event) {
      this.dragging = false
      if (this.settings.mini && this.desktop) {
        if ((this.drawerWidth < 100 && event.velocityX <= 0) || event.velocityX < -0.4) this.drawerMini = true
        else this.drawerMini = false
      } else {
        if ((this.drawerTranslateX < -100 && event.velocityX <= 0) || event.velocityX < -0.4) this.drawerOpen = false
        else this.drawerOpen = true
      }
    },
    logout () {
      this.$http.post('/api/authentication/logout').then(response => {
        this.setLoginRedirect(this.$route.fullPath)
        this.$router.push('/login')
        this.$socket.close()
      })
    }
  },
  created () {
    if (this.settings.mini && this.desktop) this.drawerOpen = true
    this.$http('/api/users/current').then(response => {
      this.userFullName = response.data.name
    })
  }
}
</script>

<style scoped>

.logo {
  height: 100%;
  overflow: hidden;
}

.logo > img {
  margin-top: -160px;
  margin-left: 20px;
  height: 400px;
}

.drawer {
  height: 100vh !important;
}

.drawer-handle-closed {
  position: fixed;
  height: 100vh;
  top: 0;
  left: 0;
  width: 15px;
  z-index: 1000;
  /* border: 2px red solid; */
}

.drawer-handle-open {
  position: absolute;
  height: 100%;
  width: 100%;
  /* border: 2px red solid; */
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
}

.drawer-header > img {
  height: 60%;
}

.user-button {
  min-width: 160px;
}

.user-menu-icon {
  margin-right: 8px;
}

</style>
