import React, { useState } from 'react';
import Quiz from './Quiz';
// import { Link } from 'react-router-dom';


let list = []
let QuizBtn = []

function Admin() {


    // let QnAadmin = []
    // let Q = []
    // let choose = []
    // let N = []


    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(1)
    const [QuizBtnCount, setQuizBtnCount] = useState(4)



    const handleChangeQuestion = (event) => {
        setQuestion(event.target.value)
    }
    const handleChangeChoose = (event) => {
        setChoose(event.target.value)
    }
    const handleChangeanswer = (event) => {
        setAnswer(event.target.value)
    }
    const handleChangePassword = (event) => {
        setPassword(event.target.value)
    }
    const handleChangeAdminPassword = (event) => {
        setAdminPassword(event.target.value)
    }
    const handleChangeTime = (event) => {
        setTime(event.target.value)
    }

    function handleClickSetting(){
        
    }

    function handleClick() {

        alert('입력이 완료되었습니다')
        localStorage.setItem('Q', question)
        localStorage.setItem('Choose', choose)
        localStorage.setItem('Answer', answer)
        localStorage.setItem('P', password)
        localStorage.setItem('AP', adminpassword)
        localStorage.setItem('T', time * 1000)

    }


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

    function handleClickQuiz() {
        let addQuiz = function () {
            return <a className="nav-link" id="Quiz4-tab" data-toggle="pill" href="#Quiz4" role="tab" >Quiz4</a>
        }
        setaddQuiz(addQuiz)
    }

    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">
                        <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 className="col-8">
                                        <h1 className="p-3 border">관리자 설정 변경 창</h1>
                                        <div className="p-3 border">
                                            <h2>변경할 비밀번호를 입력하세요</h2>
                                            <input type="text" onChange={handleChangePassword} placeholder="New Password" />

                                        </div>
                                        <div className="p-3 border">
                                            <h2>변경할 관리자 비밀번호를 입력하세요</h2>
                                            <input type="text" onChange={handleChangeAdminPassword} placeholder="New Admin Password" />

                                        </div>
                                        <div className="p-3 border">
                                            <h2>타이머를 설정하세요(초단위)</h2>
                                            <input type="text" onChange={handleChangeTime} placeholder="Set Time" />

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


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

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

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


        </>
    )
}

export default Admin