const dialog = {
    name: 'dialog-component',
    delimiters: ['[[', ']]'],
    emits: ['update:modelValue'],
    inheritAttrs: false,
    props: {
        modelValue: {
            default: null,
        },
        title: {
            default: 'Dialog',
        },
        dialogType: {
            default: 'default',
        },
        hideFooter: {
            default: false,
        },
        submitBtnText: {
            default: 'Save',
        },
        onsubmit: {
            default: () => true,
        },
        closable: {
          default: true
        }
    },
    methods: {
        closeDialog() {
            //if closable is false then do not close dialog when click outside or click on close button
            if(!this.closable) return;
            this.$emit('update:modelValue', false);
        },
        handleDialogClick(event) {
              document.body.click();
      }
    },
    template: `
    <transition name="dialog-fade">
        <dialog v-show="modelValue" class="hl-dialog-overlay zindex-modal-backdrop" @click="closeDialog">
          <div class="hl-dialog bg-white px-5 pt-2 pb-4 rounded-lg opacity-100 zindex-modal" @click.stop v-bind="$attrs" @click="handleDialogClick">
              <slot name="header">
                <div class="flex justify-between items-center">
                  <span class="block font-medium text-lg">[[title]]</span>
                  <span @click="closeDialog" class="material-symbols-outlined text-secondary-dark-grey text-lg cursor-pointer"> close </span>
                </div>
              </slot>
            <div class="hl-dialog-main mt-8">
              <slot></slot>
            </div>
            <div class="hl-dialog-footer mt-8 flex justify-end" v-if="!hideFooter">
              <slot name="footer">
                <button :class="{ 'btn-dark': dialogType == 'default', 'btn-red' : dialogType == 'danger'}" @click="onsubmit">[[submitBtnText]]</button>
              </slot>
            </div>
          </div>
        </dialog>
      </transition>
    `,
};

window.dialog_component = dialog;
export default dialog;