Vue.component("message-modal", {
  props: {
    // info | success | error | warning | reset | updating
    noticeType: {
      type: String,
      default: "info",
      validator: value =>
        ["info", "success", "error", "warning", "reset", "updating", "deepSearching"].includes(value),
    },

    // Content message
    noticeMessage: {
      type: String,
      default: "",
    },
  },

  template: /*html*/ `
    <div class="modal fade" id="messageModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div
          :class="[
            'toast show text-center',
            {
              'toast-primary': noticeType === 'info',
              'toast-success': noticeType === 'success',
              'toast-danger': noticeType === 'error',
              'toast-warning': noticeType === 'warning',
              'toast-dark': noticeType === 'reset' || noticeType === 'updating' || noticeType === 'deepSearching',
            }
          ]"
          style="pointer-events: auto;"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
        >
          <i
            v-if="noticeType === 'updating' || noticeType === 'deepSearching'"
            class="modus-icons left-icon spin mr-2"
          >
            update
          </i>

          <span v-html="noticeMessage"></span>
          <button
            v-if="noticeType === 'deepSearching'"
            type="button"
            class="btn btn-danger ml-3 cursor-pointer"
            @click="$root.cancelDeepSearch()"
          >Cancel</button>
        </div>
      </div>
    </div>
  `,
});
