<template>
  <b-toast
    :id="id"
    :variant="alert.variant"
    :visible="alert.show"
    :auto-hide-delay="alert.duration"
    :toaster="toaster"
    body-class="d-none"
    solid
    no-close-button
    @hidden="$emit('alert-hidden')"
  >
    <div slot="toast-title" class="p-3 w-100 position-relative" style="{ 'font-size': '14px' }">
      <b-btn-close class="position-absolute close-btn" @click="close" />
      <font-awesome-icon
        v-if="alert.icon"
        :icon="alert.icon"
        class="mr-2"
        :class="iconClass"
        size="lg"
      />
      <strong>{{ alert.message }}</strong>
    </div>
  </b-toast>
</template>

<script>
export default {
  props: {
    alert: {
      /*
       *   show:                Boolean,
       *   duration:            Integer (milliseconds)
       *   icon:                String
       *   message:             String
       *   iconClass:           String
       *   toaster              String
       */
      type: Object,
      required: true,
      default: () => ({}),
    },
    id: {
      type: String,
      required: true,
    },
  },
  computed: {
    iconClass() {
      return `text-${this.alert.variant}`;
    },
    toaster() {
      return this.alert.toaster || 'b-toaster-bottom-center';
    },
  },
  methods: {
    close() {
      this.$bvToast.hide(this.id);
    },
  },
};
</script>

<style scoped lang="scss">
.close-btn {
  top: -3px;
  right: -5px;
}
</style>
