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

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

const emit = defineEmits(['cancelButtonEvent', 'confirmButtonEvent'])

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

const setButtonEvent = (event?: () => void) => {
  if (event) {
    event()
  }
  isOpen.value = false
}

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

<template>
  <Transition name="fade">
    <div
      v-if="isOpen"
      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.modalName]"
      @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">
            <AtomsButtonVariant
              variant="outlined"
              @click="setButtonEvent(() => emit('cancelButtonEvent'))"
            >
              {{ props.cancelButtonText || '취소' }}
            </AtomsButtonVariant>
            <AtomsButtonVariant
              @click="setButtonEvent(() => emit('confirmButtonEvent'))"
            >
              {{ props.confirmButtonText || '확인' }}
            </AtomsButtonVariant>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style scoped>
.modal-area {
  @apply max-w-[312px] p-6 bg-white rounded-[20px];
}
</style>
