<i18n>
{
  "en": {
    "close": "Close"
  },
  "de": {
    "close": "Schließen"
  }
}
</i18n>

<template>
  <v-snackbar
    v-model="showSnackbar"
    bottom
    right
    :timeout="currentSnackbar.timeout || 4000"
    :color="currentSnackbar.color"
  >
    {{ currentSnackbar.text }}
    <v-btn
      flat
      @click="showSnackbar = false"
    >
      {{ $t('close') }}
    </v-btn>
  </v-snackbar>
</template>

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

export default {
  name: 'NotificationsSnackbars',
  data () {
    return {
      snackbarsInQueue: false,
      currentSnackbar: {},
      showSnackbar: false
    }
  },
  computed: {
    ...mapState('notifications', ['snackbars']),
    ...mapGetters('notifications', ['nextSnackbar'])
  },
  watch: {
    showSnackbar (value) {
      if (!value) {
        var nextSnackbar = this.nextSnackbar
        if (nextSnackbar) {
          this.shiftSnackbars()
          setTimeout(() => {
            this.currentSnackbar = nextSnackbar
            this.showSnackbar = true
          }, 500)
        } else {
          this.snackbarsInQueue = false
        }
      }
    },
    snackbars (value) {
      if (!this.snackbarsInQueue) {
        this.snackbarsInQueue = true
        this.currentSnackbar = this.nextSnackbar
        this.shiftSnackbars()
        this.showSnackbar = true
      }
    }
  },
  methods: {
    ...mapMutations('notifications', ['shiftSnackbars'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

@media (max-width: 960px) {
  .notifications {
    right: 12px;
    max-width: 100%;
  }
}

@media (min-width: 961px) {
  .notifications {
    width: 600px;

  }
}

</style>
