<template>
  <Carousel :breakpoints="breakpoints" :wrapAround="true">
    <Slide v-for="item in videos.data" :key="item.sort_order" class="mx-4 mb-16">
      <div class="rounded-[30px] py-5 px-3">
        <div class="section-video relative group">
          <div>
            <video :src="item.videos" autoplay muted loop class="w-[1280px] 2xl:h-[550px] xl:h-[450px] lg:h-[450px] h-full rounded-[30px] object-cover"></video>
            <div class="absolute top-5 left-8 text-white">
              {{ item.title }}
              <!-- {{ item.videos }} -->
            </div>

            <div class="bg-overlay absolute inset-0 bg-[#273A97] opacity-0 flex items-center justify-center rounded-[30px] duration-300 group-hover:opacity-95">
              <div class="text-center text-white lg:px-40 md:px-32 px-10">
                <button>
                  <div @click="showVideoPopup(item.sort_order, item.videoId, item.videos, item.youtube, '')" class="play-button inline hover:scale-150 transition duration-500 cursor-pointer">
                    <div class="play-icon">
                      <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="12" cy="12" r="12" fill="white" />
                        <polygon points="10,8 16,12 10,16" fill="#273A97" />
                      </svg>
                    </div>
                  </div>
                </button>
                <p class="mt-5">
                  {{ item.description }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Slide>
    <template class="relative" #addons>
      <Pagination />
    </template>
  </Carousel>

  <!-- Popup Video Modal -->
  <div v-if="isVideoShow" @click="closeVideoPopup" class="fixed w-full h-full top-0 left-0 bg-black/90 flex flex-col align-center justify-center px-30">
    <a @mouseleave="leave" class="text-end ml-auto w-5 mr-5 text-white text-2xl hover:text-secondary mb-5">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="#fff">
        <path
          d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
        />
      </svg>
    </a>

    <div class="flex w-full z-0 px-10 justify-center">
      <iframe
        class="w-full md:h-[380px] h-[180px] lg:w-[70%] lg:h-[550px] z-0"
        src="https://www.youtube.com/embed/qkFj1sHO-eM?si=LFhvPwbWNMKUGIGI"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
      ></iframe>
    </div>
  </div>
  <video-detail-modal ref="videoRef"></video-detail-modal>
</template>

<script setup>
import { useFetch } from "nuxt/app";
import VideoDetailModal from "@/components/modal/VideoDetailModal.vue";
import { ref } from "vue";

const appConfig = useAppConfig();

const { data: videos } = await useFetch(appConfig.api.url + "/api/videos", {
  method: "GET",
});

const isVideoShow = ref(false);
const videoId = ref(null);
const videoRef = ref(null);

const showVideoPopup = (id, vId, url, fromYoutube) => {
  // videoId.value = vId;
  // isVideoShow.value = true;

  videoRef.value.show({
    title: vId,
    video: url,
    youtube: fromYoutube,
  });
};

const closeVideoPopup = () => {
  isVideoShow.value = false;
  videoId.value = null;
};

function enter() {
  isHover.value = true;
}

function leave() {
  isHover.value = false;
}
const breakpoints = {
  300: {
    itemsToShow: 1,
    snapAlign: "start",
  },
  400: {
    itemsToShow: 1,
    snapAlign: "start",
  },
  600: {
    itemsToShow: 1.5,
    snapAlign: "start",
  },
  1024: {
    itemsToShow: 1.65,
    snapAlign: "start",
  },
};
</script>

<script>
import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide, Pagination } from "vue3-carousel";
import VideoList from "./CardNoodles.vue";

export default {
  components: {
    VideoList,
    Carousel,
    Slide,
  },
  data() {
    return {
      itemss: [
        {
          video: "/images/vid1.mp4",
          text: "Noodle Nirvana : Exploring the World's Best Noodles Dishes",
        },
        {
          video: "/images/vid2.mp4",
          text: "Noodle Nirvana : Glutten-Free Rice Noodles",
        },
        {
          video: "/images/vid3.mp4",
          text: "Noodle Nirvana : Glutten-Free Rice Noodles",
        },
      ],
    };
  },
};
</script>

<style>
.my-clip {
  clip-path: circle(250px at center);
  inset: 0;
  background-size: cover;
  opacity: 1;
  z-index: 10;
  transition: 800ms ease-in-out;
}

.my-clip-hover {
  clip-path: circle(380px at center);
  transition: 800ms ease-in-out;
}

@media (max-width: 393px) {
  .my-clip {
    clip-path: circle(174px at center);
    inset: 0;
    background-size: cover;
    opacity: 1;
    z-index: 10;
    transition: 800ms ease-in-out;
  }
}
.play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; /* Set desired size */
  height: 60px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.play-button:hover {
  transform: scale(1.1);
}

.play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel__item {
  text-align: left;
}

.carousel__icon {
  @apply text-black;
}

.pagination-white {
  button::after {
    @apply bg-gray-500;
  }

  button:hover::after {
    @apply bg-white;
  }

  .carousel__pagination-button--active::after {
    @apply bg-white;
  }
}
.play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; /* Set desired size */
  height: 60px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel__pagination-button::after {
  width: 12px;
  height: 12px;
  border-radius: 6px;
}
</style>
