<template>
  <div
    class="funnel-header d-flex justify-content-center align-items-center flex-column"
    v-if="imageSrc"
  >
    <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
  </div>
  <alert
    class="position-absolute rounded-0 w-100 border-0 shadow-sm"
    v-if="displayGlobalAlert"
    :alertClass="globalAlertMessage.type"
    :alertHeadline="globalAlertMessage.messageHeadline"
    :alertCopy="globalAlertMessage.messageCopy"
    v-bind:isDismissible="globalAlertMessage.isDismissible"
  />
</template>

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

export default {
  name: "funnel-header",
  data() {
    return {
      imageSrc: "",
      displayGlobalAlert: false,
      globalAlertMessage: {
        isDismissible: false,
        messageCopy: "",
        messageHeadline: "",
        type: "",
      },
    };
  },
  methods: {
    initializeComponent(cmsContent) {
      this.imageSrc = cmsContent.LogoImage;
    },
  },
  components: {
    alert,
  },
  mounted() {
    // Check if alert event is on the bus
    const alertEvent = eventBus.readAndPopEventFromBus(
      globalEvents.Categories.GLOBAL_ALERT,
      globalEvents.SubCategories.PAGE_NOT_FOUND
    );

    // If alert event is on the bus, then display the alert
    if (alertEvent !== undefined) {
      this.displayGlobalAlert = true;
      this.globalAlertMessage = alertEvent;
    }
  },
};
</script>

<style lang="scss" scoped>
.funnel-header {
  height: 56px;
}

.logo-image {
  max-width: 78px;
}
</style>
