import React from 'react'
import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer'; // 타이머쓰기위해 import

const question = [
    { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "24", N: 1 },
    { Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "6", N: 2 },
    { Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "2", N: 3 }
]

class Quiz extends React.Component {
    constructor(props) {
        super(props)
        this.setQuestion = this.setQuestion.bind(this)
        this.answerbox = this.answerbox.bind(this)
        this.timer = this.timer.bind(this)
        // this.enterkey = this.enterkey(this)
        this.state = {
            ...question[0],
            i: 0,
            page: 0,
            question

        }
    }
    setQuestion() {
        //값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
        this.answerbox()
        this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, page: this.state.page + 1 })
    }
    //answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장 
    answerbox() {
        let answers = document.getElementsByName('answer');
        for (let i = 0; i < answers.length; i++) {
            if (answers[i].checked === true) {
                localStorage.setItem((this.state.i + 1) + '번문제답', answers[i].value)
                localStorage.setItem((this.state.i + 1) + '번문제정답', question[this.state.i].A)
            }
        }
    }

    timer() {
        return (
            <Timer
                initialTime={10010}
                direction="backward"
                checkpoints={[
                    {
                        time: 0,
                        callback: this.setQuestion
                        //  history.go(1)
                    }
                ]}
            >
                {() => (
                    <>
                        <Timer.Seconds /> seconds
                    </>
                )}
            </Timer> /* npm i react-compound-timer */
        )
    }

    render() {
        return (
            <div className="Quiz">
                <h2>Q:{this.state.Q}</h2>
                <div>
                    {this.state.Choose.map((a) =>
                        <div>{this.state.N}
                            <input type="radio" name='answer' id={a} value={a} /*ref={this.textInput}  input 네임을 문제단위로 바꾸어주어야 함. */ />
                            <label for={a}>{a}</label>
                        </div>)

                    }
                </div>
                <div className="App" class='left'>정답을 입력하세요</div>


                {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
                {(this.state.page === question.length - 1)
                    ? <Link to="/end"><button onClick={this.answerbox}>제출</button></Link>
                    : <button type="button" onClick={this.setQuestion} >다음</button>

                }
                {/* <input onKeyPress="this.enterkey()"/> */}

                {this.timer()}

            </div>
        )
    }
}

export default Quiz;