<script setup lang="ts">
import { getYouTubeUrl } from '@/layers/utils/youtubeUtil'

const modalStore = useModalStore()
const scrollStore = useScrollStore()

const { youtube } = modalStore

const youtubeUrl = computed(() => {
  return getYouTubeUrl(youtube.storeYoutubeUrl)
})

const handleClose = () => {
  youtube.storeIsOpen = false
  scrollStore.controlScrollLock(false)
}

const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Escape' && youtube.storeIsOpen) {
    handleClose()
  }
}

const handleOutsideClick = () => {
  if (youtube.storeIsOutsideClose) handleClose()
}

// 키보드 이벤트 리스너 등록/해제
onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<template>
  <Transition name="fade">
    <div
      v-if="youtube.storeIsOpen"
      :class="['modal-wrap', 'dimmed', youtube.storeModalName]"
      @click="handleOutsideClick"
    >
      <div
        class="relative mx-4 my-4"
        style="
          width: min(896px, 90vw, calc((90vh - 2rem) * 16 / 9));
          aspect-ratio: 16/9;
        "
        @click.stop
      >
        <!-- 헤더 -->
        <div class="flex justify-end mb-3 md:mb-4">
          <button type="button" @click="handleClose">
            <AtomsIconsCloseLine />
          </button>
        </div>

        <!-- 유튜브 영상 컨테이너 -->
        <div class="relative w-full h-full">
          <iframe
            v-if="youtubeUrl"
            :src="youtubeUrl"
            class="absolute top-0 left-0 w-full h-full"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            title="YouTube video player"
          />
        </div>
      </div>
    </div>
  </Transition>
</template>

<style scoped>
.modal-wrap {
  @apply overflow-hidden flex items-center justify-center;
}
</style>
