<template>
  <div id="Chapter1_1" 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('Chapter3_12')"><img src="../../../../resources/img/left.png" alt="" /></div>
      <div class="content title-box">
        <p class="title mt25 title-bg">step3</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="text-ct">
          <div class="time-hint">
            <button class="hint-btn">HINT</button>
            <div class="time-bg mt20">
              <div>
                <div class="time">
                  <p class="second">{{ timer }}</p>
                  <p class="text">sec</p>
                </div>
              </div>
            </div>
          </div>
          <div class="flex justify-center">
            <div class="flex justify-between align-center" style="width: 50%">
              <!-- SVG Container for Drawing Lines -->
              <svg class="line-container" xmlns="http://www.w3.org/2000/svg" :style="{ width: svgWidth, height: svgHeight }">
                <line v-for="(pair, index) in pairs" :key="'line-' + index" :x1="pair.leftPos.x" :y1="pair.leftPos.y" :x2="pair.rightPos.x" :y2="pair.rightPos.y" stroke="blue" stroke-width="2" />
              </svg>

              <div class="pickGroup left">
                <div>
                  <article class="flex align-center justify-between mb20" style="gap: 60px" v-for="(image, index) in images" :key="'left-' + index">
                    <img :src="image.src" :alt="image.alt" />
                    <div>
                      <button class="blue-c" @click="selectLeft(index, $event)"></button>
                    </div>
                  </article>
                </div>
              </div>

              <div class="pickGroup right">
                <article v-for="(word, index) in question" :key="index" class="flex align-center justify-start mb20" style="gap: 30px">
                  <button class="blue-c" @click="selectRight(index, $event)"></button>
                  <p class="word">{{ word }}</p>
                </article>
              </div>
            </div>
          </div>
        </div>
        <button class="submit-button" @click="handleSubmit()">제출하기</button>
      </div>
      <div class="next-btn" @click="goToPage('Chapter3_14')"><img src="../../../../resources/img/right.png" alt="" /></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: "00",
      question: ["Australia", "Brazil", "China"],
      images: [
        { src: "client/resources/img/img121_62s.png", alt: "Australia" },
        { src: "client/resources/img/img122_62s.png", alt: "Brazil" },
        { src: "client/resources/img/img123_62s.png", alt: "China" },
      ],

      selectedLeft: null, // 왼쪽에서 선택된 인덱스 저장
      selectedRight: null, // 오른쪽에서 선택된 인덱스 저장
      pairs: [], // 매칭된 쌍을 저장
      svgWidth: "100%", // SVG의 너비
      svgHeight: "100%", // SVG의 높이
    };
  },
  methods: {
    goToPage(page) {
      this.$router.push({ name: page });
    },
    startTimer() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      this.timer = 5;
      this.intervalId = setInterval(() => {
        if (this.timer > 0) {
          this.timer--;
        } else {
          clearInterval(this.intervalId);
        }
      }, 1000);
    },

    selectLeft(index, event) {
      this.selectedLeft = { index, element: event.target };
      this.checkMatch(); // 매칭을 시도
    },
    selectRight(index, event) {
      this.selectedRight = { index, element: event.target };
      this.checkMatch(); // 매칭을 시도
    },
    checkMatch() {
      if (this.selectedLeft !== null && this.selectedRight !== null) {
        // 매칭 성공 시 좌표를 계산하여 저장
        const leftPos = this.getElementPosition(this.selectedLeft.element);
        const rightPos = this.getElementPosition(this.selectedRight.element);

        this.pairs.push({
          left: this.selectedLeft.index,
          right: this.selectedRight.index,
          leftPos,
          rightPos,
        });

        // 매칭이 된 후 선택 해제
        this.selectedLeft = null;
        this.selectedRight = null;
      }
    },
    getElementPosition(element) {
      const rect = element.getBoundingClientRect();
      return {
        x: rect.left + rect.width / 2,
        y: rect.top + rect.height / 2,
      };
    },
    handleSubmit() {
      // 매칭된 결과를 확인하거나 제출 시 로직 처리
      console.log("Matched pairs: ", this.pairs);
    },
    updateSVGSize() {
      const container = document.querySelector(".position-relative");
      if (container) {
        this.svgWidth = `${container.clientWidth}px`;
        this.svgHeight = `${container.clientHeight}px`;
      }
    },
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {
    // SVG의 크기를 동적으로 설정
    this.updateSVGSize();
    window.addEventListener("resize", this.updateSVGSize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateSVGSize);
  },
};
</script>
<style scoped>
.textbox {
  height: 60px;
}
.textbox p {
  font-size: 28px;
  font-weight: bold;
  line-height: 65px;
}
.dropGroup button {
  position: relative;
}

.pickGroup {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.pickGroup .word {
  font-size: 48px;
  font-family: "ONEMobilePOPOTF";
}

.dragGroup button p {
  font-size: 48px;
}

.submit-button {
  position: absolute;
  background-color: #ffba08;
  padding: 10px 30px;
  border-radius: 10px;
  font-size: 28px;
  font-family: "ONEMobilePOPOTF";
  right: 5rem;
  bottom: 3rem;
}

.position-relative {
  position: relative;
}

.line-container {
  position: absolute;
  bottom: 215px;
  right: 125px;
  pointer-events: none;
}

.blue-c {
  width: 20px;
  height: 20px;
  background-color: blue;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
</style>
