<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('Chapter2_7')">
        <img src="../../../../resources/img/left.png" alt="" />
      </div>
      <div class="content title-box">
        <div style="display: flex; justify-content: space-between">
          <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
          <button id="returnButton" @click="returnPage" style="margin: 4rem">
            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
            <p>되돌리기</p>
          </button>
        </div>
        <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">
          <!-- <p class="title1 mb40" style="color: #464749;">The sun rises in the east and sets in the west. It is very hot during summer.</p>
              <img src="../../../../resources/img/img65_37s.png" alt=""> -->

          <img class="exampleImg" :src="imgSrc" alt="example img" />

          <!-- 정답 칸 -->
          <div class="dropGroup flex align-center justify-center mt30">
            <span class="mr30">{{ beforeQuestion }}</span>

            <!-- 드롭 가능한 영역 -->
            <div class="dropContainer" id="targetContainer">
              <div
                v-for="(slot, index) in answerLength"
                :key="index"
                class="dropSlot"
                @dragover.prevent
                @drop="onDrop($event, index)"
              >
                <div
                  class="dropSlot-inner"
                  draggable="true"
                  @dragstart="onDragStart($event, userAnswer[index], index)"
                >
                  <img
                    src="../../../../resources/img/img64_37s.png"
                    alt="answer slot"
                  />
                  <div v-if="userAnswer[index]" class="dropped-char">
                    {{ userAnswer[index].toUpperCase() }}
                  </div>
                </div>
              </div>
            </div>

            <span class="mr30">{{ afterQuestion }}</span>
          </div>

          <!-- 드래그 가능한 버튼 -->
          <div class="dragGroup mt40" id="sourceContainer">
            <button
              v-for="(char, index) in choiceCharacters"
              :key="index"
              draggable="true"
              @dragstart="onDragStart($event, char)"
            >
              <img
                src="../../../../resources/img/img63_37s_2.png"
                alt="drag letter"
              />
              <p>{{ char.toUpperCase() }}</p>
            </button>
          </div>
        </div>
      </div>
      <div class="next-btn" @click="goToPage('Chapter2_6')">
        <img src="../../../../resources/img/right.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: "client/resources/img/jumpingRabbit.gif",
      example: "a rabbit is/?/a guitar",
      beforeQuestion: "",
      afterQuestion: "",
      choice: "ygnpali",
      answer: "playing",
      answerLength: 0, // 초기화 시 0으로 설정

      userAnswer: [], // 초기화 시 빈 배열로 설정
      draggedChar: null, // 드래그한 문자를 임시로 저장
    };
  },
  computed: {
    choiceCharacters() {
      return this.choice.split("");
    },
  },
  methods: {
    goToPage(page) {
      this.$router.push({ name: page });
    },
    splitExample() {
      const parts = this.example.split("/?/");
      if (parts.length === 2) {
        this.beforeQuestion = parts[0];
        this.afterQuestion = parts[1];
      }
    },
    // 드래그 시작 시 호출
    onDragStart(event, char) {
      this.draggedChar = char;
    },
    // 드롭 시 호출
    onDrop(event, index) {
      if (this.userAnswer[index] === "") {
        this.userAnswer.splice(index, 1, this.draggedChar);
        const charIndex = this.choiceCharacters.indexOf(this.draggedChar);
        if (charIndex > -1) {
          this.choiceCharacters.splice(charIndex, 1); // 드래그한 문자를 choice에서 제거
        }
        this.draggedChar = null;
        this.checkAnswer(); // 드롭 후 정답을 확인
      }
    },
    checkAnswer() {
      // userAnswer 배열이 모두 채워졌는지 확인
      if (!this.userAnswer.includes("")) {
        setTimeout(() => {
          if (this.userAnswer.join("") === this.answer) {
            alert("정답입니다!");
          } else {
            alert("오답입니다!");
          }
        }, 0);
      }
    },
    initializeUserAnswer() {
      this.answerLength = this.answer.length; // answer의 길이를 answerLength에 설정
      this.userAnswer = Array(this.answerLength).fill(""); // answerLength만큼 빈 배열 생성
    },
    returnPage() {
      window.location.reload();
    },
  },
  mounted() {
    this.splitExample();
    this.initializeUserAnswer(); // 컴포넌트가 마운트될 때 userAnswer 초기화
  },
};
</script>
<style scoped>
.dropContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.dropGroup button {
  position: relative;
}
.dropGroup button p {
  font-size: 48px;
}
.dragGroup button p {
  font-size: 48px;
}
.dropGroup span {
  margin: 0px 10px;
}
.dropSlot {
  position: relative;
  width: 64px;
  height: 64px;
}
.dropSlot-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.dropped-char {
  font-family: "ONEMobilePOPOTF";
  position: absolute;
  top: 55%;
  left: 55%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: bold;
  color: black;
  pointer-events: none;
}
.dragGroup button p {
  font-size: 48px;
}
.exampleImg {
  width: 15%;
}
#sourceContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
</style>
