import React, { useState } from 'react';
import AdminQuiz from './AdminQuiz'
import AdminSetting from './AdminSetting'

let QuizBtn = []

function Admin() {
    // QnA.length === 0 ? console.log(QnA.length) : QnA = JSON.parse(localStorage.getItem('QnA'))
    const [result, setresult] = useState('')
    const [QuizBtnCount, setQuizBtnCount] = useState(4)

    function handleClickSetting() {
        setresult(<AdminSetting />)
    }

    function handleClickQuiz(e) {
        setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />)

        // let QnA = JSON.parse(localStorage.getItem('QnA'))
        // if (QnA !== null) {
        //     (QnA[e.target.id - 1] === undefined) ? setresult(<AdminQuiz QuizNum={e.target.id} data={{ Q: '문제를 입력하세요', Choose: '보기를 입력하세요', A: '정답을 입력하세요' }} />) : setresult(<AdminQuiz QuizNum={e.target.id} data={QnA[e.target.id - 1]} />)

        // }
        // else {
        //     setresult(<AdminQuiz QuizNum={e.target.id} data={{ Q: '문제를 입력하세요', Choose: '보기를 입력하세요', A: '정답을 입력하세요' }} />)

        // }
    }

    function handleClickAddQuiz() {
        QuizBtn.push(
            <button type='button' className='btn btn-outline-primary' id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button>
        )
        setQuizBtnCount(QuizBtnCount + 1)
    }

    return (
        <>
            <div className="container-fluid">
                <div className="row justify-content-md-center mt-5">
                    <div className="col-2 text-center border py-5">
                        <div className="mb-5">
                            <h4>관리자페이지</h4>
                        </div>
                        <div>
                            <button type="button" className="btn btn-outline-info mb-5" onClick={handleClickSetting}>Setting</button>
                        </div>
                        <div class="btn-group-vertical">
                            <button type="button" className="btn btn-outline-primary" id="1" onClick={handleClickQuiz}>Quiz 1</button>
                            <button type="button" className="btn btn-outline-primary" id="2" onClick={handleClickQuiz}>Quiz 2</button>
                            <button type="button" className="btn btn-outline-primary" id="3" onClick={handleClickQuiz}>Quiz 3</button>
                            {QuizBtn.map((element) => element)}
                            <button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button>

                        </div>
                    </div>

                    <div className="col-8 ">
                        {result}
                    </div>
                </div>
            </div>


        </>
    )
}

export default Admin