// Silence may be golden, but sometimes words paint the canvas of understanding.
const LinksyModal = {
  name: "LinksyModal",
  props: {
    opened: Boolean,
    backdrop: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "Modal Title",
    },
  },
  data() {
    return {
      show: false,
    };
  },
  watch: {
    opened: {
      deep: true,
      handler(val) {
        if (this.show !== val) {
          this.show = val;
        }
      },
    },
  },
  methods: {
    handleSave(event) {
      this.$emit("onSave", event);
    },
    handleCancel(event) {
      this.$emit("onCancel", event);
    },
  },
  template: `
    <div class="linksy-modal modal" :class="{'show': show}">
        <div class="backdrop" @click="(e) => backdrop && handleCancel(e)"></div>
        <div class="linksy-modal-dialog">
            <div class="linksy-modal-content">
                <div class="linksy-modal-header position-sticky top-0 z-3 bg-white shadow-sm">
                    <slot name="header">
                        <div class="d-flex justify-content-between align-items-center gap-3 w-100">
                          <slot name="title">
                            <h1 class="linksy-modal-title fs-5">{{title}}</h1>
                          </slot>
                          <button class="btn-cancel" type="button" @click="handleCancel">
                              <i class="fa fa-times fs-6"></i>
                          </button>
                        </div>
                    </slot>
                </div>
                <div class="linksy-modal-body">
                    <slot name="body"></slot>
                </div>
                <slot name="footer">
                    <div class="linksy-modal-footer">
                        <button type="button" class="button py-0 linksy-btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="button btn-app py-0" @click="handleSave">Save changes</button>
                    </div>
                </slot>
            </div>
        </div>
    </div>
    `,
  mounted() {
    this.show = this.opened;
  },
};
