<script setup lang="ts">
import type { DialogParams } from '#layers/types/components/modal'

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

const emit = defineEmits(['confirmButtonEvent'])

const { tm } = useI18n()

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">
            <AtomsButtonModal
              @click="setButtonEvent(() => emit('confirmButtonEvent'))"
            >
              {{ props.confirmButtonText || tm('Text_Confirm') }}
            </AtomsButtonModal>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

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