<template>
    <v-container v-show="gamehiding === false" class="player_video_div">
        <video
        ref="videoJsPlayer"
        class="video-js  player_video"
        controls
        ></video>
    </v-container>
</template>

<script setup>
    import { ref, onMounted, onBeforeUnmount } from 'vue';
    import videojs from 'video.js';
    import 'video.js/dist/video-js.css';
    import Mysteryland_h264 from '@/quizz/Quizz-1/festival/Mysteryland_h264.mp4';
    import { subscribeToTopic } from '@/services/mqttService';
    let gamehiding = ref(true);

    let player = ref(null);
    const videoOptions = {
    autoplay: false,
    controls: false,
    preload: 'auto',
    fluid: true,
    loop: false,
    volume: 0,
    sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
    };

    const handleMessage = (topic, message) => {
        console.log(topic, message)
        if (topic === "/display/media") {
            switch (message) {
            case "BOX_BEAT.mp4":
                changeVideoSource("BOX_BEAT.mp4")
                break;
            case "DARK_VALLEY.mp4":
                changeVideoSource("DARK_VALLEY.mp4")
                break;
            }
        }
        if (topic === "/display/control") {
            switch (message) {
            case "play":
                gamehiding.value = false;
                console.log("▶️ Lecture de la vidéo !");
                player.value.play().catch((error) => {
                console.error("Erreur de lecture :", error);
                });
                break;
            case "pause":
                gamehiding.value = true;
                console.log("⏸️ Pause de la vidéo !");
                player.value.pause();
                break;
            case "hide":
                console.log("🛑 Cacher la vidéo (implémentation à venir)");
                break;
            }
        }
    };
    const changeVideoSource = (relativePath) => {
    try {
        const fullPath = new URL(`../quizz/Quizz-1/festival/${relativePath}`, import.meta.url).href;

        if (player.value) {
            if (relativePath.includes("mp4")){
            player.value.src({ src: fullPath, type: 'video/mp4' });
            }
            if (relativePath.includes(".jpg")){
            player.value.src({ src: fullPath, type: 'image/jpeg' });
            }
            player.value.load();
            player.value.play().catch((err) => console.error('Erreur lecture :', err));
        }
    } catch (error) {
        console.error('❌ Erreur lors du chargement de la vidéo :', error);
    }
    };

    // --- Lifecycle
    onMounted(() => {
    player.value = videojs(
        document.querySelector('.video-js'),
        videoOptions,
        () => {
        console.log('🎥 Video player ready');
        }
    );

    subscribeToTopic('#', (topic, message) => {
        handleMessage(topic, message);
        });
    });

    onBeforeUnmount(() => {
    if (player) {
        player.dispose();
    }
    });
</script>

<style>
.player_video_div {
    margin-top: 40px;
    width: calc(100vw - 20%);
    height: calc(100vh - 20%);
    border-radius: 20px !important;
  }
  .player_video {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 25px !important;
  }
  .vjs-tech{
    border-radius: 25px;
  }

</style>