<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/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" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
                <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>
                </div>
                <div class="text-ct">
                    <div class="dropGroup">
                        <div class="flex justify-center">
                            <div class="popTxt" id="drop1" @dragover.prevent @drop="handleDrop(1)">
                                <img src="../../../../resources/img/img66_38s_1.png" alt="" />
                                <button v-if="showButton1">
                                    <img src="../../../../resources/img/img66_38s_1_color.png" alt="" />
                                    <p>{{ answerArr[0] }}</p>
                                </button>
                            </div>
                            <div class="popTxt" id="drop2" @dragover.prevent @drop="handleDrop(2)">
                                <img src="../../../../resources/img/img66_38s_2.png" alt="" />
                                <button v-if="showButton2">
                                    <img src="../../../../resources/img/img66_38s_2_color.png" alt="" />
                                    <p>{{ answerArr[1] }}</p>
                                </button>
                            </div>
                            <div class="popTxt" id="drop3" @dragover.prevent @drop="handleDrop(3)">
                                <img src="../../../../resources/img/img66_38s_3.png" alt="" />
                                <button v-if="showButton3">
                                    <img src="../../../../resources/img/img66_38s_3_color.png" alt="" />
                                    <p>{{ answerArr[2] }}</p>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="dragGroup">
                        <article style="right: 0; top: 36%" @dragstart="handleDragStart(1)" v-show="!dragHidden1">
                            <button id="drag1" draggable="true">
                                <img src="../../../../resources/img/img67_38s.png" alt="" />
                                <p>{{ answerArr[0] }}</p>
                            </button>
                        </article>
                        <article style="left: 0; top: 36%" @dragstart="handleDragStart(2)" v-show="!dragHidden2">
                            <button id="drag2" draggable="true">
                                <img src="../../../../resources/img/img68_38s.png" alt="" />
                                <p>{{ answerArr[1] }}</p>
                            </button>
                        </article>
                        <article style="left: 50%; top: 10%" @dragstart="handleDragStart(3)" v-show="!dragHidden3">
                            <button id="drag3" draggable="true">
                                <img src="../../../../resources/img/img69_38s.png" alt="" />
                                <p>{{ answerArr[2] }}</p>
                            </button>
                        </article>
                    </div>
                </div>
            </div>
            <div class="next-btn" @click="nextProblem()">
                <img src="../../../../resources/img/right.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import BookInfo from '../../../component/BookInfo.vue';
export default {
    data() {
        return {
            showButton1: false,
            showButton2: false,
            showButton3: false,
            dragHidden1: false,
            dragHidden2: false,
            dragHidden3: false,
            currentDrag: null, // 드래그 중인 퍼즐의 번호를 저장합니다.
            prblm_id: [],
            problemData: [],
            answerArr: [],
            correctNum: 0,

            seq: this.$store.getters.seqNum,
            hiddenState: false,
        };
    },
    methods: {
        complete() {
            // 로컬 스토리지에서 currentDashboard 값을 가져옴
            const savedState = localStorage.getItem('vuexState');
            if (savedState) {
                const parsedState = JSON.parse(savedState);
                const currentDashboard = parsedState.currentDashboard;

                const { unit_id, book_id } = this.$route.query;
                if (currentDashboard === 'Learning') {
                    // Learning 모드일 때 Dashboard로 이동
                    this.$router.push({
                        name: 'Dashboard',
                        query: { value: this.seq, unit_id, book_id },
                    });
                } else if (currentDashboard === 'AI') {
                    // AI 모드일 때 AIDashboard로 이동
                    this.$router.push({
                        name: 'AIDashboard',
                        query: { value: this.seq, unit_id, book_id },
                    });
                }
            } else {
                console.error('currentDashboard 값이 없습니다.');
            }
        },
        goToPage(page) {
            this.$router.push({ name: page });
        },
        returnPage() {
            // 페이지 새로 고침
            window.location.reload();
        },
        handleDragStart(dragNumber) {
            // 현재 드래그 중인 퍼즐의 번호를 저장
            this.currentDrag = dragNumber;
        },
        handleDrop(dropNumber) {
            // 드래그한 퍼즐의 번호와 드롭할 영역의 번호가 일치하는지 확인
            if (this.currentDrag === dropNumber) {
                this.showButton(dropNumber); // 버튼을 보여주고
                this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김
                this.correctNum++;
            } else {
                // 오답일 경우 알림 표시
                alert('오답입니다! 다시 시도해보세요.');
            }

            if (this.correctNum === 3) {
                setTimeout(() => {
                    alert('정답입니다!');
                    this.nextProblem();
                }, 100);
            }

            // 드래그 후 상태 초기화
            this.currentDrag = null;
        },
        hideDragButton(dragNumber) {
            if (dragNumber === 1) {
                this.dragHidden1 = true;
            } else if (dragNumber === 2) {
                this.dragHidden2 = true;
            } else if (dragNumber === 3) {
                this.dragHidden3 = true;
            }
        },
        showButton(dropNumber) {
            if (dropNumber === 1) {
                this.showButton1 = true;
            } else if (dropNumber === 2) {
                this.showButton2 = true;
            } else if (dropNumber === 3) {
                this.showButton3 = true;
            }
        },
        fetchProblemData() {
            axios({
                url: '/problem/problemInfo.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                data: {
                    prblmId: this.prblm_id.prblm_id,
                },
            })
                .then((response) => {
                    this.problemData = response.data;
                    console.log('problemData', this.problemData);
                    this.sortingProblem();
                })
                .catch((error) => {
                    this.state = 'noProblem';
                    console.error('Error fetching problemData:', error);
                });
        },
        sortingProblem() {
            let prblmExpln = this.problemData.problem.prblmExpln;
            let prblmArr = prblmExpln.split('/');
            this.answerArr = prblmArr;

            // for (let i = prblmArr.length - 1; i > 0; i--) {
            //   const j = Math.floor(Math.random() * (i + 1));
            //   [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
            // }

            // this.prblmArr = prblmArr;
            // console.log(prblmArr);
        },
        nextProblem() {
            if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
                this.$store.dispatch('goToNextProblem');
                this.handleProblemDetail(this.currentLearningId);
                this.goToPage(this.problemType);
            } else {
                // 마지막 문제면 이동
                // this.goToPage("Chapter4");
                alert('문제 학습 완료');
                this.complete();
            }
        },
        previousProblem() {
            if (this.currentProblemIndex > 0) {
                this.$store.dispatch('goToPreviousProblem');
                this.handleProblemDetail(this.currentLearningId);
                this.goToPage(this.problemType);
            }
        },

        handleProblemDetail(item) {
            if (item.prblm_type_id === 'prblm_type_001') {
                this.problemType = 'Chapter3';
            } else if (item.prblm_type_id === 'prblm_type_002') {
                this.problemType = 'Chapter3_1';
            } else if (item.prblm_type_id === 'prblm_type_003') {
                this.problemType = 'Chapter3_2';
            } else if (item.prblm_type_id === 'prblm_type_004') {
                this.problemType = 'Chapter3_3';
            } else if (item.prblm_type_id === 'prblm_type_005') {
                this.problemType = 'Chapter3_3_1';
            } else if (item.prblm_type_id === 'prblm_type_006') {
                this.problemType = 'Chapter3_4';
            } else if (item.prblm_type_id === 'prblm_type_007') {
                this.problemType = 'Chapter3_5';
            } else if (item.prblm_type_id === 'prblm_type_008') {
                this.problemType = 'Chapter3_6';
            } else if (item.prblm_type_id === 'prblm_type_009') {
                this.problemType = 'Chapter3_7';
            } else if (item.prblm_type_id === 'prblm_type_010') {
                this.problemType = 'Chapter3_8';
            } else if (item.prblm_type_id === 'prblm_type_011') {
                this.problemType = 'Chapter3_9';
            } else if (item.prblm_type_id === 'prblm_type_012') {
                this.problemType = 'Chapter3_10';
            } else if (item.prblm_type_id === 'prblm_type_013') {
                this.problemType = 'Chapter3_11';
            } else if (item.prblm_type_id === 'prblm_type_014') {
                this.problemType = 'Chapter3_12';
            } else if (item.prblm_type_id === 'prblm_type_015') {
                this.problemType = 'Chapter3_13';
            } else if (item.prblm_type_id === 'prblm_type_016') {
                this.problemType = 'Chapter3_14';
            } else if (item.prblm_type_id === 'prblm_type_017') {
                this.problemType = 'Chapter3_15';
            } else if (item.prblm_type_id === 'prblm_type_018') {
                this.problemType = 'Chapter2_8';
            } else if (item.prblm_type_id === 'prblm_type_019') {
                this.problemType = 'Chapter2_7';
            } else if (item.prblm_type_id === 'prblm_type_020') {
                this.problemType = 'Chapter2_5';
            } else if (item.prblm_type_id === 'prblm_type_021') {
                this.problemType = 'Chapter2_6';
            } else if (item.prblm_type_id === 'prblm_type_022') {
                this.problemType = 'Chapter2_10';
            } else if (item.prblm_type_id === 'prblm_type_023') {
                this.problemType = 'Chapter2_11';
            } else if (item.prblm_type_id === 'prblm_type_024') {
                this.problemType = 'Chapter2_13';
            }
        },
    },
    computed: {
        currentLearningId() {
            return this.$store.getters.currentLearningId;
        },
        currentLabel() {
            return this.$store.getters.currentLabel;
        },
        currentProblemIndex() {
            return this.$store.getters.currentProblemIndex;
        },
        isPreviousButtonDisabled() {
            return this.currentProblemIndex === 0;
        },
    },
    created() {
        console.log('Current Learning ID:', this.currentLearningId);
        this.prblm_id = this.currentLearningId;
        console.log('Current Label:', this.currentLabel);
        console.log('Current Problem Index:', this.currentProblemIndex);

        // Fetch or process the current problem based on `currentLearningId`
    },
    mounted() {
        this.fetchProblemData();
        if (this.currentProblemIndex == 0) {
            this.hiddenState = true;
        }
    },
    components: {
        BookInfo: BookInfo,
    },
};
</script>

<style scoped>
.dropGroup button {
    left: 0;
}

.dragGroup button p {
    color: #fff;
    font-size: 35px;
}

.dropGroup button p {
    font-size: 48px;
    color: #fff;
}

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