<template>
  <v-snackbar
    v-model="display"
    :timeout="3000"
    :color="color"
    :multi-line="hasErrors"
    right
    top
  >
    <v-icon class="mr-2">{{ icon }}</v-icon>
    {{ content }}


    <ul v-if="hasErrors">
      <li v-for="(allErrors, field) in errors" :key="field">
        {{ field }}
        <ul>
          <li v-for="(error, i) in allErrors" :key="i">
            {{ error }}
          </li>
        </ul>
      </li>
    </ul>

    <!-- <v-btn text @click="display = false">Close</v-btn> -->
  </v-snackbar>
</template>

<script>
// https://dev.to/stephannv/how-to-create-a-global-snackbar-using-nuxt-vuetify-and-vuex-1bda

export default {
  data() {
    return {
      display: false,
      color: 'success',
      content: '',
      icon: '',
      errors: {},
    }
  },
  mounted() {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'snackbar/showMessage') {
        this.content = state.snackbar.content
        this.color = state.snackbar.color
        this.icon = state.snackbar.icon
        this.errors = state.snackbar.errors
        this.display = true
      }
    })
  },
  computed: {
    hasErrors() {
      return Object.keys(this.errors).length > 0
    },
  },
}

</script>
