<template>
  <div
    class="alert fade show text-center mb-0 py-2 px-4"
    role="alert"
    :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
  >
    <p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
    <p v-if="splitAlertCopyForLink.length">
      <template v-for="copy in splitAlertCopyForLink" :key="copy">
        <span v-if="copy.includes('routerLink:')" class="m-0 text-body small">
          <router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
        </span>
        <span v-else class="m-0 text-body small">{{ copy }}</span>
      </template>
    </p>
    <p v-else class="m-0 text-body small">{{ alertCopy }}</p>
    <button
      type="button"
      class="btn-close p-2"
      data-bs-dismiss="alert"
      aria-label="Close"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 23.7 23.7"
        xml:space="preserve"
      >
        <path
          d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z"
        />
      </svg>
    </button>
  </div>
</template>

<script>

export default {
  name: "alert",
  props: {
    isDismissible: Boolean,
    /*
    alertClass class names:
    alert-sucess (green)
    alert-danger (red)
    alert-warning (yellow)
    alert-info (blue)
    */
    alertClass: String,
    cmsWidgetName: String,
    manualHeadline: String,
    manualCopy: String,
  },
  computed: {
    alertHeadline(){
      return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'HeadlineText') : this.manualHeadline;
    },
    alertCopy(){
      return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
    },
    splitAlertCopyForLink(){
      // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
      return this.alertCopy.split(/{(.*?)}/g);
    }
  },
};
</script>

<style lang="scss">
.alert {
  button {
    display: none;
  }
  .btn-close {
    background: none;
    opacity: 1;
    width: 0.75rem;
    height: 0.75rem;
  }
  &.alert-dismissible {
    button {
      display: flex;
      top: 2px;
      right: 2px;
    }
  }
  &.alert-info {
    background-color: $blue-100;
    .alert-heading {
      color: $blue-700;
    }
    svg {
      fill: $blue-700;
      width: 1rem;
      height: 1rem;
    }
  }
  &.alert-danger {
    background-color: $red-100;
    .alert-heading {
      color: $red-600;
    }
    svg {
      fill: $red-600;
      width: 1rem;
      height: 1rem;
    }
  }
  &.alert-warning {
    background-color: $yellow-100;
    .alert-heading {
      color: $yellow-600;
    }
    svg {
      fill: $yellow-600;
      width: 1rem;
      height: 1rem;
    }
  }
  &.alert-success {
    background-color: $green-100;
    .alert-heading {
      color: $green-700;
    }
    svg {
      fill: $green-700;
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>
