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

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)
    }

    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