<template>
  <div class="container-fluid" style="max-width: 576px">
    <div class="row">
      <div class="col-sm-12">
        <alert
          v-if="displayGlobalAlert"
          :alertClass="globalAlertMessage.type"
          :alertHeadline="globalAlertMessage.messageCopy"
          :alertCopy="globalAlertMessage.messageHeadline"
          v-bind:isDismissible="globalAlertMessage.isDismissible"
        />
      </div>
    </div>
  </div>

  <router-view></router-view>
</template>

<script>
import alert from "@/ux-components/alert/alert";
import { emitter } from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events";

export default {
  data: function () {
    return {
      globalAlertMessage: {
        isDismissible: false,
        messageCopy: "",
        messageHeadline: "",
        type: "",
      },
      displayGlobalAlert: false,
    };
  },
  mounted() {
    // Global alert message event
    emitter.on(globalEvents.GLOBAL_ALERT, (alert) => {
      this.globalAlertMessage = alert.globalAlertMessage;
      this.displayGlobalAlert = true;
    });
  },
  watch: {
    $route(to, from) {
      // If our route changes, remove the alert
      if (
        this.displayGlobalAlert &&
        from.query.fmgPage !== undefined
      ) {
        this.displayGlobalAlert = false;
      }
    },
  },
  components: {
    alert,
  },
};
</script>
