<template>
  <PureAlert :id="id" :alert="alert" @alert-hidden="resetAlert" />
</template>

<script>
import { nanoid } from 'nanoid';

import PureAlert from './PureAlert.vue';

export default {
  components: {
    PureAlert,
  },
  computed: {
    alert() {
      const {
        alertDuration,
        alertIcon,
        alertMessage,
        alertVariant,
        showAlert,
        toaster,
      } = this.$store.state.alert;

      return {
        icon: alertIcon,
        show: showAlert,
        message: alertMessage,
        variant: alertVariant,
        duration: alertDuration,
        toaster,
      };
    },
    id() {
      return `b-toast-${nanoid()}`;
    },
  },
  methods: {
    resetAlert() {
      this.$store.dispatch('alert/resetAlert');
    },
  },
};
</script>
