<template>
    <div id="Chapter1" class="content-wrap">
        <div style="margin: 30px 0px 50px; width: 20%">
            <router-link to="/MyPlan.page">
                <div class="logo mb25">
                    <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
                </div>
            </router-link>
        </div>
        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
            <BookInfo />
            <button class="completeBtn" @click="complete">학습 종료</button>
        </div>
        <div class="flex justify-between align-center">
            <div class="pre-btn">
                <img src="../../../../resources/img/left.png" alt="" />
            </div>
            <div class="content title-box">
                <p class="title mt25 title-bg">step1. Hello WORLD</p>
                <div class="videoCon">
                    <div ref="youtubePlayer" class="youtube-player"></div>
                </div>
            </div>
            <div class="next-btn" @click="goToPage('Chapter1_2')">
                <img src="../../../../resources/img/right.png" alt="" />
            </div>
        </div>
        <TextToImage />
    </div>
</template>

<script>
import TextToImage from '../../../component/TextToImage.vue';
import BookInfo from '../../../component/BookInfo.vue';
export default {
    components: {
        TextToImage,
    },
    methods: {
        complete() {
            const { unit_id, book_id } = this.$route.query;
            this.$router.push({
                name: 'Dashboard',
                query: { value: 1, unit_id, book_id },
            });
        },
        goToPage(page) {
            this.$router.push({ name: page });
        },
        loadYouTubeAPI() {
            return new Promise((resolve, reject) => {
                if (window.YT && window.YT.Player) {
                    resolve(); // API가 이미 로드된 경우
                } else {
                    const script = document.createElement('script');
                    script.src = 'https://www.youtube.com/iframe_api';
                    script.onload = () => {
                        // 스크립트가 로드되면, `YT` 객체가 준비될 때까지 기다립니다.
                        const checkYTReady = setInterval(() => {
                            if (window.YT && window.YT.Player) {
                                clearInterval(checkYTReady);
                                resolve();
                            }
                        }, 100); // 100ms마다 `YT` 객체가 준비되었는지 확인
                    };
                    script.onerror = () => reject(new Error('Failed to load the YouTube API script'));
                    document.body.appendChild(script);
                }
            });
        },
        initializePlayer() {
            if (!window.YT || !window.YT.Player) {
                console.error('YouTube Player is not available');
                return;
            }
            new window.YT.Player(this.$refs.youtubePlayer, {
                height: '550',
                width: '950',
                videoId: 'VloEiK4Ihj8', // 비디오 ID
                events: {
                    onReady: this.onPlayerReady,
                },
            });
        },
        onPlayerReady(event) {
            event.target.playVideo(); // 비디오가 준비되면 자동 재생
        },
    },
    mounted() {
        this.loadYouTubeAPI()
            .then(() => {
                this.initializePlayer();
            })
            .catch((error) => {
                console.error('Error loading YouTube API:', error);
            });
    },
    components: {
        BookInfo: BookInfo,
    },
};
</script>

<style scoped>
.youtube-player {
    width: 950px;
    /* 플레이어의 가로 크기 */
    height: 550px;
    /* 플레이어의 세로 크기 */
}

.completeBtn {
    margin-right: 100px;
    background-color: #ffba08;
    padding: 10px 30px;
    border-radius: 10px;
    font-size: 28px;
    font-family: 'ONEMobilePOPOTF';
}
</style>
