import React, { useState } from 'react';

let list = []

let QnAadmins = []
let QnAadmin = {}
let savechoose = {}

function AdminQuiz(props) {
    const [question, setQuestion] = useState(props.data.Q)
    // setQuestion(props.data.Q)
    // question = props.data.Q
    const [choose, setChoose] = useState(props.data.Choose)
    // setChoose(props.data.Choose)
    // choose = props.data.Choose
    const [answer, setAnswer] = useState(props.data.A)
    // setAnswer(props.data.A)
    // answer = props.data.A
    const [selectOption, setselectOption] = useState(1)


    // 만약 업데이트가 되었으면 question이랑 props.data.Q랑 값이 같아야 하는데 
    // admin페이지 가서 quiz 1에 값들 넣은 다음 콘솔찍어보고 quiz 2에도 값을 넣고 콘솔보면 어떤게 다른지 알 수 있을거야
    // 마지막으로 quiz3 눌러보면 확실하게 알 수 있을거고 값이 처음만 업데이트되고 나중에는 업데이트가 안되고있어
    console.log(question) 
    console.log(props.data.Q)
    console.log(choose)
    console.log(props.data.Choose)
    console.log(answer)
    console.log(props.data.A)

    const handleChangeQuestion = (event) => {
        QnAadmin['Q'] = event.target.value
        setQuestion(event.target.value)
    }
    const handleChangeChoose = (event) => {
        savechoose[event.target.id] = event.target.value
        setChoose(event.target.value)
    }
    const handleChangeanswer = (event) => {
        QnAadmin['A'] = event.target.value
        setAnswer(event.target.value)
    }

    function addSelectOption() {
        list.push(
            <div className="input-group">
                <div className="input-group-prepend">
                    <div className="input-group-text">
                        <input type="radio" checked={false} name="answer" />
                    </div>
                </div>
                <input type="text" class="form-control" id={String(selectOption + 1)} value={choose[selectOption]} placeholder={(selectOption + 1) + '번 보기를 입력하세요'} onChange={handleChangeChoose} />
            </div>
        )
        setselectOption(selectOption + 1)
    }


    function handleClick() {
        if (!question) {
            alert('문제가 입력되지 않았습니다.')
        }
        else if (!choose) {
            alert('보기가 입력되지 않았습니다.')
        }
        else if (!answer) {
            alert('정답이 입력되지 않았습니다.')
        }
        else {
            // console.log(QnAadmin)
            QnAadmin['Choose'] = Object.values(savechoose)
            QnAadmin['N'] = String(props.QuizNum)
            QnAadmins.push(QnAadmin)
            QnAadmin = {}
            localStorage.setItem('QnA', JSON.stringify(QnAadmins))
            // console.log(QnAadmins)
            alert('입력이 완료되었습니다.')
        }

    }

    // function handleChangeQuestion(){}


    return (
        <>
            <div className="" id="Quiz1">
                <h2 className="p-3 border text-center">{String(props.QuizNum)}번 문제만들기</h2>
                <div className="p-3 borber">
                    <div className="p-3 ">
                        <span className="font-weight-bold mr-2 h3">1. 문제 입력하기</span>
                        <input type="text" id="inputQuiz" className="form-control" onChange={handleChangeQuestion} value={question} placeholder={'문제를 입력하세요'} ></input>
                    </div>
                    <div className="p-3 ">
                        <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
                        <div className="p-3 ">
                            <div className="input-group">
                                <div className="input-group-prepend">
                                    <div className="input-group-text">
                                        <input type="radio" checked={false} name="answer" />
                                    </div>
                                </div>
                                <input type="text" className="form-control" id='1' value={choose} placeholder={'1번 보기를 입력하세요'} onChange={handleChangeChoose} />
                            </div>
                            {list.map((element) => element)}
                            <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
                        </div>
                    </div>

                    <div className="p-3 ">
                        <span className="font-weight-bold mr-2 h3">정답:</span>
                        <input type="text" onChange={handleChangeanswer} value={answer} placeholder={'정답를 입력하세요'} />
                    </div>

                    <label for="inputLogin" className="d-flex justify-content-center">
                        <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
                    </label>
                </div>
            </div>
        </>
    )
}

export default AdminQuiz