<script setup>
import { VueFinalModal } from 'vue-final-modal'
import CCard from '../CCard/CCard.vue'
import CCardHeader from '../CCardHeader/CCardHeader.vue'
import { CCardHeaderProps } from '../CCardHeader/CCardHeaderProps'
import MDIcon from '../MDIcon/MDIcon.vue'

/**
 * Uses Vue Final Modal under the hood.
 * @see https://v3.vue-final-modal.org
 */
defineProps({
  ...CCardHeaderProps,
  p_Fullscreen: { type: Boolean, default: false },
  modelValue: { type: Boolean, required: true },
})

const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <VueFinalModal
    classes="c-modal-wrapper"
    :contentClass="`c-modal-content ${p_Fullscreen ? '_fullscreen' : ''}`"
    :clickToClose="false"
    v-bind="$attrs"
    :ssr="false"
    :modelValue="modelValue"
    @update:modelValue="(val) => emit('update:modelValue', val)"
  >
    <CCardHeader
      v-if="p_Title"
      :p_Title="p_Title"
      :p_TitleAlign="p_TitleAlign"
      :p_Type="p_Type"
      :p_ButtonHidden="p_ButtonHidden"
      :p_ArrowOpen="p_ArrowOpen"
      class="_c_header_font"
      @close="() => emit('update:modelValue', false)" />
    <CCard class="_card" :class="{ _dialog: !!p_Title }">
      <!-- <MDIcon
        v-if="!p_Title"
        name="cancel"
        @click="() => emit('update:modelValue', false)"
        class="_close_btn"
      /> -->
      <slot /> </CCard
  ></VueFinalModal>
</template>

<style>
.c-modal-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-modal-content {
  display: flex;
  flex-direction: column;
}
.c-modal-content._fullscreen {
  height: 100%;
  width: 100%;
}
.c-modal-content._fullscreen ._card {
  height: 100%;
  max-height: none;
}

._c_header_font {
  font-size: 14px;
  padding: 0 0 0 15px;
  min-height: 40px;
}
.c-modal-wrapper ._c_header_font ._icon_btn {
  font-size: 21px;
  padding: 9.5px;
}
.c-modal-wrapper ._c_header_font ._icon_btn ._hover_effect {
  border-radius: 0;
}

._card {
  position: relative;
}

._dialog {
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  height: fit-content;
}

._close_btn {
  position: absolute;
  right: 10px;
  z-index: 10;
}
</style>
