<template>
  <q-layout view="lHh LpR fFf" class="bg-grey-3">
    <q-header elevated>
      <q-toolbar :style="{background: $state.titleColor}">
        <q-btn
          flat
          dense
          round
          @click="leftDrawerOpen = !leftDrawerOpen"
          aria-label="Menu">
          <q-icon name="menu" />
        </q-btn>
        <q-toolbar-title class="title">
          {{$state.title}}
          <div
            v-if="$state.subtitle"
            class="subtitle text-caption">
            {{$state.subtitle}}
          </div>
        </q-toolbar-title>
        <div ref="top"/>
        <q-space/>
        <div ref="toolbar"/>
        <q-btn flat
          v-if="!$state.user.loggedIn"
          class="q-ml-md"
          :label="$t('login')"
          to="/login"
        />
        <q-btn
          v-if="$state.useRightDrawer"
          @click="$state.rightDrawerOpen = !$state.rightDrawerOpen"
          aria-label="Menu"
          flat
          dense
          round>
          <q-icon name="menu"/>
        </q-btn>
      </q-toolbar>
    </q-header>
    <q-drawer
      v-model="leftDrawerOpen"
      behavior="mobile"
      elevated
      overlay>
      <div class="q-pa-md shadow-1 q-mb-md bg-grey-9 text-white">
        <img
          src="statics/logo-dark.svg"
          alt="Verdnatura"
          class="logo q-mb-md"
          style="width: 80%"
        />
        <div class="text-subtitle1">
          <div
            v-if="$state.user.loggedIn"
            class="row items-center full-width justify-between">
            <span>{{$state.user.name}}</span>
            <q-btn
              icon="exit_to_app"
              :title="$t('logout')"
              @click="onLogout"
              flat
              dense
              round
            />
          </div>
          <div v-else>
            <router-link to="/login">
              {{$t('login')}}
            </router-link>
          </div>
        </div>
      </div>
      <q-list
        class="text-body1"
        v-for="item in menu"
        :key="item.name">
        <q-item
          v-if="!item.childs"
          :to="{name: item.name}">
          <q-item-section>
            <q-item-label>{{$t(item.name)}}</q-item-label>
          </q-item-section>
        </q-item>
        <q-expansion-item
          v-if="item.childs"
          :label="$t(item.name)"
          expand-separator>
          <q-list>
            <q-item
              v-for="subitem in item.childs"
              :key="subitem.name"
              :to="{name: subitem.name}"
              class="q-pl-lg">
              <q-item-section>
                <q-item-label>{{$t(subitem.name)}}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-expansion-item>
      </q-list>
    </q-drawer>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<style lang="stylus" scoped>
  .logo
    height: 2.5em;
    display: block;
  .title
    line-height 1.2em
  .subtitle
    line-height 1.2em
  .q-toolbar
    transition-property background
    transition-duration 200ms
</style>

<script>
import { openURL } from 'quasar'

export default {
  name: 'MyLayout',
  data () {
    return {
      leftDrawerOpen: false, // this.$q.platform.is.desktop
      search: '',
      menu: [
        { name: 'home' },
        { name: 'catalog' },
        { name: 'orders' },
        { name: 'conditions' },
        { name: 'about' },
        {
          name: 'admin',
          childs: [
            { name: 'panel' },
            { name: 'users' },
            { name: 'connections' },
            { name: 'visits' },
            { name: 'news' },
            { name: 'images' },
            { name: 'items' }
          ]
        },
        {
          name: 'config',
          childs: [
            { name: 'user' },
            { name: 'addresses' }
          ]
        }
      ]
    }
  },
  created () {
    this.$state.layout = this
  },
  destroyed () {
    this.$state.layout = null
  },
  methods: {
    openURL,
    onLogout () {
      localStorage.removeItem('token')
      Object.assign(this.$state.user, {
        loggedIn: false
      })
      this.$router.push('/login')
    }
  }
}
</script>
