const { createApp, ref, computed, onMounted } = Vue;

createApp({
  setup() {
    const modalOpen = ref(false);
    const currentVideoUrl = ref('');
    const videoItems = ref([]);

    const sortedVideoItems = computed(() => {
      return videoItems.value.slice().sort((a, b) => a.title.localeCompare(b.title));
    });

    const getYoutubeThumbnail = (id) => {
      return `https://img.youtube.com/vi/${id}/hqdefault.jpg`;
    };

    const openModal = (id) => {
      currentVideoUrl.value = `https://www.youtube.com/embed/${id}?rel=0&autoplay=1&mute=1`;
      modalOpen.value = true;
    };

    const closeModal = () => {
      modalOpen.value = false;
      currentVideoUrl.value = '';
    };

    onMounted(() => {
      fetch('./data/videoItems.json')
        .then(response => response.json())
        .then(data => {
          videoItems.value = data;
        })
        .catch(error => {
          console.error('JSONの読み込みに失敗しました:', error);
        });
    });

    return {
      modalOpen,
      currentVideoUrl,
      sortedVideoItems,
      getYoutubeThumbnail,
      openModal,
      closeModal
    };
  }
}).mount('#videoLibraryApp');