<template>
  <div>
    <div
      v-if="isOpen"
      class="modal fade in"
      tabindex="-1"
      role="dialog"
      :id="id"
      style="display: block; padding-right: 17px"
      @click="onDismiss"
    >
      <div
        @click.stop
        style="overflow-y: initial !important"
        class="modal-dialog"
        :class="_size"
        role="document"
      >
        <div class="modal-content">
          <div class="modal-header">
            <slot name="header"></slot>
            <h5 class="modal-title">{{ title }}</h5>
          </div>
          <div
            class="modal-body"
            :class="{ 'scrollbars scrollbars-light': isScrollable }"
            :style="[
              isScrollable
                ? { 'overflow-y': 'auto', 'max-height': _maxHeight }
                : '',
            ]"
          >
            <slot name="body"></slot>
            <span v-if="message" class="modal-message">{{ message }}</span>
          </div>
          <div class="modal-footer">
            <!-- use the .btn-link-toolbar for the correct padding if the footer only contains link buttons -->
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </div>
    <div v-if="open" class="modal-backdrop fade in" />
  </div>
</template>

<script>
  import { str2bool } from "../../util";
  export default {
    name: "bc-modal",
    props: {
      id: {
        type: String,
        default: null,
      },
      title: {
        type: String,
        default: null,
      },
      message: {
        type: String,
        default: null,
      },
      size: {
        type: String,
        default: null,
      },
      open: {
        type: [Boolean, String],
        default: false,
      },
      dismissable: {
        type: [Boolean, String],
        default: true,
      },
      scrollable: {
        type: [Boolean, String],
        default: false,
      },
    },
    mounted() {
      // console.log("modal mounted");
    },
    computed: {
      isOpen() {
        return str2bool(this.open, false);
      },
      isDismissable() {
        return str2bool(this.dismissable, false);
      },
      isScrollable() {
        return str2bool(this.scrollable, false);
      },
      _maxHeight() {
        let innerHeight = window.innerHeight;
        return String(innerHeight - 180) + "px";
      },
      _size() {
        let size = this.size;
        if (size) {
          if (size === "large") {
            return "modal-lg";
          } else if (size === "small") {
            return "modal-sm";
          }
        }
        return "modal-auto";
      },
    },
    methods: {
      onDismiss() {
        // close modal unless explictely not allowed to be dissmised
        if (this.isDismissable) {
          this.$emit("close", this.id);
          console.log("dismiss");
          // this.open = false;
        }
      },
      onConfirm() {
        console.log("confirm");
      },
    },
  };
</script>
