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


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

// let Setadmins = []
// let Setadmin = {}
let QuizBtn=[]

function Admin() {

    const[result, setresult] = useState('')
    const[QuizBtnCount, setQuizBtnCount] = useState(4)

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

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


    // const [question, setQuestion] = useState('')
    // const [choose, setChoose] = useState('')
    // const [answer, setAnswer] = useState('')
    // const [password, setPassword] = useState('')
    // const [adminpassword, setAdminPassword] = useState('')
    // const [time, setTime] = useState('')
    // const [addQuiz, setaddQuiz] = useState('')
    // const [selectOption, setselectOption] = useState('')


    // const handleChangeQuestion = (event) => {

    //     QnAadmin['Q'] = event.target.value

    //     setQuestion(event.target.value)
    // }
    // const handleChangechoose = (event) => {

    //     QnAadmin['Choose'] = event.target.value

    //     setChoose(event.target.value)
    // }
    // const handleChangeanswer = (event) => {

    //     QnAadmin['A'] = event.target.value

    //     setAnswer(event.target.value)
    // }
    // const handleChangePassword = (event) => {
    //     Setadmin['password'] = event.target.value
    //     setPassword(event.target.value)

    // }
    // const handleChangeAdminPassword = (event) => {
    //     Setadmin['AdminPassword'] = event.target.value
    //     setAdminPassword(event.target.value)
    // }
    // const handleChangeTime = (event) => {
    //     Setadmin['Time'] = event.target.value
    //     setTime(event.target.value)
    // }


    // function handleClickQnA() {
    //     if (!question) {
    //         alert('문제가 입력되지 않았습니다.')
    //     }
    //     else if (!choose) {
    //         alert('보기가 입력되지 않았습니다.')
    //     }
    //     else if (!answer) {
    //         alert('정답이 입력되지 않았습니다.')
    //     }
    //     else {
    //         console.log(QnAadmin)
    //         QnAadmins.push(QnAadmin)
    //         localStorage.setItem('QnA', JSON.stringify(QnAadmins))
    //         console.log(QnAadmins)
    //         alert('입력이 완료되었습니다.')
    //     }

    // }
    // function handleClicksetting() {
    //     if (!password) {
    //         alert('비밀번호가 입력되지 않았습니다.')
    //     }
    //     else if (!adminpassword) {
    //         alert('관리자 비밀번호가 입력되지 않았습니다.')
    //     }
    //     else if (!time) {
    //         alert('제한시간이 입력되지 않았습니다.') //타임은 조건은 빼도 될 듯
    //     }
    //     else {
    //         Setadmins.push(Setadmin)
    //         localStorage.setItem('Set', JSON.stringify(Setadmins))
    //         console.log(Setadmins)
    //         alert('저장이 완료되었습니다.')
    //         console.log(Setadmin)

    //         // setDoneset(true)
    //     }

    // }
    // function addSelectOption() {
    //     let list = function () {
    //         return <div className="input-group">
    //             <div className="input-group-prepend">
    //                 <div className="input-group-text">
    //                     <input type="radio" id="option" />
    //                 </div>
    //             </div>
    //             <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
    //         </div>
    //     }
    //     setselectOption(list)
    // // }
    // function handleClickQuiz() {
    //     let addQuiz = function () {
    //         return <a className="nav-link" id="Quiz4-tab" data-toggle="pill" href="#Quiz" role="tab" >Quiz4</a>
    //     }
    //     setaddQuiz(addQuiz)
    // }

    return (
        <>
        <div className="container-fluid">
            <div className="row justify-content-md-center mt-5 ">
                <div className="col-2 text-center border">
                    <div className="my-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">
                    <div className="tab-content" id="v-pills-tabContent">
                        <div className="tab-pane fade show active" id="setting" role="tabpanel" >
                            <div className="row d-flex justify-content-center">
                            </div>
                        </div>
            
                        {result}

                    </div>
                </div>
            </div>
        </div>


    </>
    )
}

export default Admin