<template>
  <v-snackbar
    v-model="notification.enabled"
    :color="notification.color"
    transition="scroll-y-transition"
    right
    top
    app
  >
    {{ notification.text }}

    <template #action="{ attrs }">
      <v-btn
        v-if="notification.showButton"
        :color="notification.color === 'error'
          || notification.color === 'warning'
          || notification.color === 'success'
          ? 'white'
          : 'orange darken-2'"
        text
        v-bind="attrs"
        @click="notification.buttonAction"
      >
        {{ notification.buttonText }}
      </v-btn>
      <v-btn
        v-if="notification.dismissable"
        class="ml-2"
        icon
        x-small
        @click="notification.enabled = false"
      >
        <v-icon>fa-times</v-icon>
      </v-btn>
    </template>
  </v-snackbar>
</template>

<script>
export default {
  name: 'StarkillerSnackbar',
  data() {
    return {
      queue: [],
      notification: { enabled: false },
    };
  },
  watch: {
    queue: {
      deep: true,
      handler(val) {
        if (val.length > 0 && this.notification.enabled === false) {
          this.notification = val.shift();
        }
      },
    },
    'notification.enabled': {
      async handler(val) {
        if (this.queue.length > 0 && val === false) {
          // give transition time.
          setTimeout(() => { this.notification = this.queue.shift(); }, 500);
        }
      },
    },
  },
  methods: {
    error(obj) {
      if (typeof obj === 'string') {
        this.q({ text: obj, color: 'error' });
      } else {
        this.q({ ...obj, color: 'error' });
      }
    },
    warn(obj) {
      if (typeof obj === 'string') {
        this.q({ text: obj, color: 'warning' });
      } else {
        this.q({ ...obj, color: 'warning' });
      }
    },
    success(obj) {
      if (typeof obj === 'string') {
        this.q({ text: obj, color: 'success' });
      } else {
        this.q({ ...obj, color: 'success' });
      }
    },
    info(obj) {
      if (typeof obj === 'string') {
        this.q({ text: obj });
      } else {
        this.q({ ...obj });
      }
    },
    q({
      text,
      buttonText = 'View',
      showButton = false,
      buttonAction,
      color = '',
      dismissable = true,
    }) {
      this.queue.push({
        text, buttonText, showButton, buttonAction, enabled: true, color, dismissable,
      });
    },
  },
};
</script>

<style>

</style>
