<template>
  <div :class="classes" role="alert" ref="alert">
    {{ text }}
    <button
      v-if="dismissible"
      type="button"
      class="btn-close"
      data-bs-dismiss="alert"
      aria-label="Close"
    ></button>
  </div>
</template>

<script>
export default {
  props: { modelValue: { type: Object, default: () => {} } },
  mounted: function() {
    if (this.$refs.alert) {
      this.$refs.alert.addEventListener("closed.bs.alert", this.disable);
    }
  },
  methods: {
    disable: function() {
      this.$emit("update:modelValue", null);
      console.log("click");
    },
  },
  computed: {
    classes: function() {
      let classes = "alert alert-" + this.variant + " fade show";
      if (this.dismissible) {
        classes += " alert-dismissible";
      }
      return classes;
    },
    text: function() {
      if (this.modelValue && typeof this.modelValue === "string") {
        return this.modelValue;
      } else {
        if (this.modelValue && "text" in this.modelValue) {
          return this.modelValue.text;
        } else {
          return "Illegal notification message structure";
        }
      }
    },
    variant: function() {
      if (
        this.modelValue &&
        typeof this.modelValue === "object" &&
        "variant" in this.modelValue
      ) {
        return this.modelValue.variant;
      } else {
        return "info";
      }
    },
    dismissible: function() {
      if (
        this.modelValue &&
        typeof this.modelValue === "object" &&
        "dismissible" in this.modelValue
      ) {
        return this.modelValue.dismissible;
      } else {
        return false;
      }
    },
  },
};
</script>

<style></style>