<template>
   <div id="Chapter2_2" class="content-wrap">
      <div style="margin: 30px 0px 50px; width: 20%">
         <router-link to="/MyPlan.page">
            <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
         </router-link>
      </div>
      <div class="title-box mb25 flex align-center mt40">
         <span class="title mr40">1. Hello WORLD</span>
         <span class="subtitle">my name is dd</span>
      </div>
      <div class="flex justify-between align-center">
         <div class="pre-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/left.png" alt="">
         </div>
         <div class="content title-box">
            <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
            <div class="flex align-center mb30">
               <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
               <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
          </button> -->
            </div>
            <div class="time-bg">
               <div>
                  <div class="time">
                     <p class="second">{{ timer }}</p>
                     <p class="text">sec</p>
                  </div>
               </div>
            </div>

            <div class="imgGroup">
               <div class="flex justify-center" style="gap: 90px;">
                  <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
                     <div class="listenGroup">
                        <img :src="item.imgSrc1">
                        <p class="textbox"><img :src="item.imgSrc"></p>
                     </div>
                     <div class="listenGroup" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                        <img :src="item.imgSrc2">
                        <p class="title4 textbox">{{ item.title }}</p>
                     </div>
                  </button>
               </div>
            </div>
         </div>
         <div class="next-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/right.png" alt="">
         </div>
      </div>
   </div>
</template>


<script>
export default {
   data() {
      return {
         items: [
            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img77_41s.png', isSecondImageVisible: false, title: 'america' },
            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img47_s.png', isSecondImageVisible: false, title: 'airplane' },
            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img75_41s.png', isSecondImageVisible: false, title: 'cat' },
            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img74_41s.png', isSecondImageVisible: false, title: 'mountain' }
         ],
         timer: 0,
         intervalId: null,
         currentIndex: 0,
      };
   },
   methods: {
      goToPage(page) {
         this.$router.push({ name: page });
      },
      toggleImage(index) {
         this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
      },
      startTimer() {
      // 현재 실행 중인 타이머가 있다면 정리
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }

      // 타이머 및 이미지 토글 상태 초기화
      this.timer = 0;
      this.currentIndex = 0; // 현재 타이머 인덱스를 추적

      // 시작 타이머 설정
      this.runTimer();
      },

      runTimer() {
         // 반복 타이머 설정
         this.intervalId = setInterval(() => {
            if (this.currentIndex == this.items.length)
               return;
            if (this.timer < 5) {
               this.timer++; 
            } else {
               // 타이머가 끝났을 때, 다음 타이머 설정
               this.timer = 0;

               if (this.currentIndex < this.items.length) {
                  // 현재 인덱스에 해당하는 아이템으로 이미지 토글
                  this.toggleImage(this.currentIndex); 
                  this.currentIndex++;
               } else {
                  // 모든 타이머가 완료되었으면 타이머 정리
                  clearInterval(this.intervalId);
                  this.intervalId = null;
                  console.log('모든 타이머가 완료되었습니다.');
               }
            }
         }, 1000);
    },
   },
   mounted() {
      this.startTimer()
   }
}

</script>
<style scoped>
.popTxt {
   width: 295px;
   height: 406px;
}

.popTxt div:last-child img {
   position: absolute;
   top: 0;
   left: 0;
}

.listenGroup .textbox {
   top: 50%;
   left: 50%;
}
</style>