<script setup lang="ts">
import { PropType, computed, ref, onMounted, onBeforeUnmount } from 'vue'
import CCCard from '../CCCard/CCCard.vue'
import CCMDIcon from '../CCMDIcon/CCMDIcon.vue'

type DialogSize = 's' | 'S' | 'm' | 'M' | 'l' | 'L'

const props = defineProps({
  /**
   * ダイアログの開閉ステータス
   * @example true: 展開
   */
  modelValue: { type: Boolean, default: false },
  /**
   * サイズ
   * @example 's' | 'S' | 'm' | 'M' | 'l' | 'L'
   */
  size: { type: String as PropType<DialogSize>, default: 'l' },
  /**
   * ログインページだけページの使用が異なる。
   * trueの場合グローバルナビがない場合のサイズとなる
   */
  loginPage: { type: Boolean, default: false },
})

// Emitの定義
const emit = defineEmits<{
  (e: 'close', value: boolean): void
  (e: 'update:modelValue', value: boolean): void
}>()

const model = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
  },
})

const clickAction = () => {
  model.value = false
  emit('close', false)
}
const toggleBodyOverflow = (enable) => {
  const body = document.body
  if (enable) {
    body.style.overflow = 'hidden'
  } else {
    body.style.overflow = 'auto'
  }
}
// ダイアログが表示されるときにスクロールを無効化
onMounted(() => {
  toggleBodyOverflow(true)
})
// ダイアログが閉じられるときにスクロールを有効化
onBeforeUnmount(() => {
  toggleBodyOverflow(false)
})
</script>

<template>
  <Teleport to="body">
    <transition name="fade" v-if="model">
      <div
        class="_cc_modal"
        :class="{
          _card_position_large: size === 'l' || size === 'L',
          _cc_modal_login_page: loginPage,
        }"
      >
        <div
          v-if="size === 's' || size === 'S'"
          class="_dialog_container_small"
          :class="{ _dialog_container_small_login_page: loginPage }"
        >
          <div class="_close_container_small">
            <CCMDIcon name="close" class="_close_icon" @click="clickAction" />
          </div>
          <CCCard class="_modal_card_small">
            <slot />
          </CCCard>
        </div>

        <div v-if="size === 'm' || size === 'M'" class="_dialog_container_medium">
          <div class="_close_container_medium">
            <CCMDIcon name="close" class="_close_icon" @click="clickAction" />
          </div>
          <CCCard class="_modal_card_medium">
            <slot />
          </CCCard>
        </div>

        <div v-if="size === 'l' || size === 'L'">
          <div class="_close_container_large">
            <CCMDIcon name="close" class="_close_icon" @click="clickAction" />
          </div>
          <CCCard class="_modal_card_large">
            <slot />
          </CCCard>
        </div>
      </div>
    </transition>
  </Teleport>
</template>

<style lang="sass" scoped>
._cc_modal
    position: fixed
    top: 0
    left: 0
    z-index: 9999
    background: rgb(var(--c-modal-black-rgb), 0.3)
    backdrop-filter: blur(1px)
    height: 100vh
    width: 100vw
    display: flex

._cc_modal_login_page
    top:0
    left:0

._dialog_container_small
    position: absolute
    top: 50%
    left: calc((100vw + 0px) / 2)
    transform: translate(-50%, -50%)
    -webkit-transform: translate(-50%, -50%)
    -ms-transform: translate(-50%, -50%)
    // width: 500px
._dialog_container_small_login_page
    left: calc((100vw) / 2)
._close_container_small
    height: 50px
    display: flex
    justify-content: end
    align-items: center
    padding-right:  10px

._dialog_container_medium
  position: absolute
  top: 50%
  left: calc((100vw + 0px) / 2)
  transform: translate(-50%, -50%)
  -webkit-transform: translate(-50%, -50%)
  -ms-transform: translate(-50%, -50%)
  width: 1000px

._close_container_medium
  height: 50px
  display: flex
  justify-content: end
  align-items: center
  padding-right:  10px

._modal_card_medium
  padding: 50px 0
  overflow: auto

._card_position_large
    flex-direction: column
    align-items: end

._modal_card_small
    // padding: 50px 0 40px 0
    overflow: auto

._close_container_large
    height: 50px
    width: calc( 100vw - 225px )
    display: flex
    align-items: center
    justify-content: end
    padding-right:  10px

._close_icon
    font-size: 36px
    cursor: pointer
    color: #FFFFFF
    transition: 0.3s
._close_icon:hover
    opacity: 0.7

._modal_card_large
    width: calc( 100vw - 215px )
    height: calc( 100vh - 50px )
    overflow: auto

.fade-enter-active, .fade-leave-active
  transition: opacity 0.3s ease


.fade-enter-from, .fade-leave-to
  opacity: 0

.fade-enter-to, .fade-leave-from
  opacity: 1
</style>
