<template>
    <v-toolbar
            flat
            prominent
            id="core-toolbar"
            style="background: #eee;"
    >
        <div class="v-toolbar-title">
            <v-toolbar-title class="tertiary--text font-weight-light">
                <v-btn
                        v-if="responsive"
                        class="default v-btn--simple"
                        dark
                        icon
                        @click.stop="onClickBtn"
                >
                    <v-icon>mdi-view-list</v-icon>
                </v-btn>
                {{ nazov }}
            </v-toolbar-title>
        </div>
        <v-spacer></v-spacer>
        <v-toolbar-items>
            <v-flex
                    align-center
                    layout
                    py-2
            >
                <v-text-field
                        v-if="responsiveInput"
                        class="mr-4 mt-2 purple-input"
                        label="Vyhľadať..."
                        hide-details
                        color="purple"
                />
                <v-btn icon @click="$emit('vyzadovaneOdhlasenie')">
                    <v-icon color="tertiary">mdi-logout</v-icon>
                </v-btn>
            </v-flex>
        </v-toolbar-items>
    </v-toolbar>
</template>

<script>
  import { mapMutations } from 'vuex'

  export default {
    name: 'Toolbar',
    data () {
      return {
        nazov: null,
        responsive: false,
        responsiveInput: false,
      }
    },
    props: {},
    watch: {
      '$route' (value) {
        this.nazov = value.name
      }
    },
    mounted () {
      this.onResponsiveInverted()
      window.addEventListener('resize', this.onResponsiveInverted)
    },
    beforeDestroy () {
      window.removeEventListener('resize', this.onResponsiveInverted)
    },
    methods: {
      ...mapMutations('nastavenia', ['setDrawer']),
      onClickBtn () {
        this.setDrawer(!this.$store.state.nastavenia.drawer)
      },
      onResponsiveInverted () {
        if (window.innerWidth < 991) {
          this.responsive = true
          this.responsiveInput = false
        } else {
          this.responsive = false
          this.responsiveInput = true
        }
      }
    }
  }
</script>

<style>
    #core-toolbar a {
        text-decoration: none;
    }
</style>
