<script setup lang="ts">
interface props {
  isShowDimmed?: boolean
  contentText?: string
  confirmButtonText?: string
  isOutsideClose?: boolean
  className?: string
}

const props = withDefaults(defineProps<props>(), {
  isShowDimmed: false,
  isOutsideClose: true,
})

const emit = defineEmits(['confirmButtonEvent'])

const isOpen = defineModel<boolean>('isOpen', { default: false })

const setButtonEvent = (event?: () => void | void) => {
  if (typeof event === 'function') {
    return event()
  }
  isOpen.value = false
}

const handleOutsideClick = () => {
  if (props.isOutsideClose) {
    isOpen.value = false
  }
}
</script>

<template>
  <Transition name="opacity-on">
    <div
      v-if="isOpen"
      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.className]"
      @click="handleOutsideClick"
    >
      <div class="modal-area" @click.stop>
        <div class="modal-content">
          <p
            v-if="props.contentText"
            v-dompurify-html="props.contentText"
            class="content-text"
          ></p>
          <slot></slot>
          <div class="content-btns">
            <AtomsButtonModal
              @click="setButtonEvent(() => emit('confirmButtonEvent'))"
            >
              {{ props.confirmButtonText || '확인' }}
            </AtomsButtonModal>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>
