<template>
    <v-navigation-drawer
            app
            dark
            floating
            persistent
            pouzivatel
            width="260"
            id="app-drawer"
            v-model="inputValue"
            mobile-break-point="991"
    >
        <v-img src="/public/kniznica.jpg" height="100%">
            <v-layout class="fill-height" tag="v-list" column>
                <v-list-tile avatar>
                    <v-list-tile-avatar color="white">
                        <v-img src="/public/v.png" height="34" contain/>
                    </v-list-tile-avatar>
                    <v-list-tile-title class="title">
                        Vzdelávanie
                    </v-list-tile-title>
                </v-list-tile>
                <v-divider/>
                <v-list-tile v-if="responsive">
                    <v-text-field class="purple-input search-input" label="Vyhľadať..." color="purple"/>
                </v-list-tile>

                <v-list-tile
                        v-for="(item, i) in items"
                        avatar
                        class="v-list-item"
                        :key="i"
                        :to="{ name: item.to }"
                        :active-class="farba"
                >
                    <v-list-tile-action>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-title v-text="item.text"></v-list-tile-title>
                </v-list-tile>

                <v-list-tile
                        disabled
                        active-class="primary"
                        class="v-list-item v-list__tile--buy"
                >
                    <v-list-tile-action>
                        <v-icon>mdi-account</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-title class="font-weight-light">
                        {{ pouzivatel.cele_meno }}
                    </v-list-tile-title>
                </v-list-tile>
            </v-layout>
        </v-img>
    </v-navigation-drawer>
</template>

<script>
  import { mapMutations, mapState } from 'vuex'

  export default {
    name: 'Navigation',
    props: {
      pouzivatel: {
        type: Object
      },
      items: {
        type: Array,
        default: []
      }
    },
    data () {
      return {
        responsive: false
      }
    },
    watch : {},
    computed: {
      ...mapState('nastavenia', ['farba']),
      inputValue: {
        get () {
          return this.$store.state.nastavenia.drawer
        },
        set (val) {
          this.setDrawer(val)
        }
      },
    },
    mounted () {
      this.onResponsiveInverted()
      window.addEventListener('resize', this.onResponsiveInverted)
    },
    beforeDestroy () {
      window.removeEventListener('resize', this.onResponsiveInverted)
    },
    methods: {
      ...mapMutations('nastavenia', ['setDrawer', 'toggleDrawer']),
      onResponsiveInverted () {
        if (window.innerWidth < 991) {
          this.responsive = true
        } else {
          this.responsive = false
        }
      }
    }
  }
</script>

<style lang="scss">
    #app-drawer {
        .v-list__tile {
            border-radius: 4px;
            &--buy {
                margin-top: auto;
                margin-bottom: 17px;
            }
        }
        .v-image__image--contain {
            top: 9px;
            height: 60%;
        }
        .search-input {
            margin-bottom: 30px !important;
            padding-left: 15px;
            padding-right: 15px;
        }
    }
</style>
