<template>
  <div>
    <v-app-bar
            app
            clipped-left
            clipped-right
            color="blue accent-4"
            class="elevation-4"
            dark
            dense
    >
      <v-btn icon @click="reload()">
        <v-img src="@/assets/logo-64.png" contain height="40"></v-img>
      </v-btn>
      <v-toolbar-title>Flaschengeist <span class="caption">v1.0.1</span></v-toolbar-title>
      <v-spacer/>
      <v-btn icon v-if="getRouteName == 'resetPassword'" @click="goTo('login')">
        <v-icon>
          mdi-home
        </v-icon>
      </v-btn>
      <v-btn icon v-if="getRouteName == 'priceListNoLogin'" @click="goBack()">
        <v-icon>
          {{ back }}
        </v-icon>
      </v-btn>
      <v-btn icon v-if="isFinanzer" :disabled="locked" @click="goTo('overview')">
        <v-icon>{{ attach_money }}</v-icon>
      </v-btn>
      <v-btn icon v-if="isGastro" :disabled="locked" @click="goTo('gastroPricelist')">
        <v-icon>{{ gastro }}</v-icon>
      </v-btn>
      <v-btn icon v-if="isBar" @click="goTo('geruecht')">
        <v-icon>{{ local_bar }}</v-icon>
      </v-btn>
      <v-btn icon v-if="isUser" :disabled="locked" @click="goTo('add')">
        <v-icon>{{ person }}</v-icon>
      </v-btn>
      <v-btn icon @click="goTo('priceListNoLogin')">
        <v-icon>{{ list }}</v-icon>
      </v-btn>
    </v-app-bar>
    <ConnectionError/>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import {
  mdiCurrencyEur,
  mdiGlassCocktail,
  mdiAccount,
  mdiFileMultiple,
  mdiFoodForkDrink,
  mdiArrowLeftBoldCircle
} from '@mdi/js'
import ConnectionError from "@/components/ConnectionError";

export default {
  name: 'TitleBar',
  components: {ConnectionError},
  data() {
    return {
      attach_money: mdiCurrencyEur,
      local_bar: mdiGlassCocktail,
      person: mdiAccount,
      list: mdiFileMultiple,
      gastro: mdiFoodForkDrink,
      back: mdiArrowLeftBoldCircle
    }
  },
  computed: {
    ...mapGetters(['isBar', 'isFinanzer', 'isUser', 'isLoggedIn', 'isGastro']),
    ...mapGetters({locked: 'barUsers/locked'}),
    getRouteName() {
      return this.$route.name
    }
  },
  methods: {
    ...mapActions(['logout']),
    reload() {
      location.reload()
    },
    goTo(name) {
      this.$router.push({name: name})
    },
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push({name: 'main'})
    },
  }
}
</script>

<style scoped></style>
