<template>
  <v-snackbar
    v-model="show"
    :timeout="timeout"
    :color="color"
    right
  >
    {{ text }}

    <template v-slot:action="{ attrs }">
      <v-btn
        dark
        depressed
        v-bind="attrs"
        @click="show = false"
      >
        Close
      </v-btn>
    </template>
  </v-snackbar>
</template>

<script>
export default {
  name: "Snackbar",
  data: () => ({
    show: false,
    timeout: 4000,
    text: '',
    color: '',
  }),
  created() {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'snackbar/showMessage') {
        this.text = state.snackbar.content
        this.color = state.snackbar.color
        this.show = true
      }
    });
  }
}
</script>

<style scoped>

</style>