<template>
  <div>
    <div v-if="isShow" @click="hide()" class="fixed top-0 left-0 w-full h-full z-[51] bg-black flex bg-opacity-80">
      <section class="relative hero md:w-[70%] w-[80%] h-full container mx-auto lg:mt-[130px] md:mt-[130px] mt-[270px] flex">
        <div class="w-full grid place-items-center h-[170px]">
          <div class="w-full grid place-items-center">
            <hover-video-player v-if="theData.youtube === null" playback-start-delay="100" class="md:w-[80%] bg-slate-200">
              <video :src="theData.video" playsinline loop autoplay preload="metadata" width="100%"></video>
              <div slot="loading-overlay">
                <div class="loading-spinner"></div>
              </div>
            </hover-video-player>
            <div class="flex w-full z-0 px-10 justify-center" v-else :id="getId(theData.youtube)">
              <iframe
                class="w-full md:h-[380px] h-[180px] lg:h-[60vh] z-0"
                :src="theData.youtube"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen
              ></iframe>
            </div>
            <!-- <LiteYouTubeEmbed v-else :id="getId(theData.youtube)" title="" /> -->
          </div>
          <div class="w-full flex justify-between px-8">
            <!-- <div v-if="position != 0" @click="prev" class="cursor-pointer">
                <img src="/arrow-line-black.svg" alt="" />
              </div> -->
            <div></div>
            <div class="-mt-2">{{ theData.title }}</div>
            <!-- <div
                v-if="position != theList.length - 1"
                @click="next"
                class="cursor-pointer"
              >
                <img src="/arrow-line-black.svg" alt="" class="rotate-180" />
              </div> -->
            <div></div>
          </div>
        </div>
        <div class="lg:ml-0 md:ml-0 ml-2">
          <img :src="'/icon_close.svg'" class="z-100 w-[20px]" alt="" />
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const isShow = ref(false);
// const theList = ref({});
const theData = ref({});
// const position = ref(0);

const select = ref(null);
let errorAuth = ref();

function show(data) {
  console.log("showDetail= " + JSON.stringify(data));
  isShow.value = true;
  theData.value = data;
}

function hide() {
  isShow.value = false;
}

function next() {
  position.value++;
}

function prev() {
  position.value = position.value - 1;
}

function getId(body) {
  try {
    const myArray = body.split("/");

    return myArray[4];
  } catch (error) {}
}

defineExpose({ show, hide });
</script>

<style scoped></style>
