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

let list = []

function Admin() {

    const [question, setQuestion] = useState('')
    const [choose, setChoose] = useState('')
    const [answer, setAnswer] = useState('')
    const [selectOption, setselectOption ] = useState('')
    // const [done, setDone] = useState(false)

    const handleChangeQuestion = (event) => {
        setQuestion(event.target.value)
    }
    const handleChangechoose = (event) => {
        setChoose(event.target.value)
    }
    const handleChangeanswer = (event) => {
        setAnswer(event.target.value)
    }

    function handleClick() {

        // localStorage.setItem('N', number)
        localStorage.setItem('Q', question)
        localStorage.setItem('Choose', choose)
        localStorage.setItem('Answer', answer)
        // setDone(true)
        alert('입력이 완료되었습니다')
    }

    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" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
            </div>
        }
        setselectOption(list)
    }

    return (
        <>
            {/* {done ? alert('모두 입력되었습니다.') : ''} */}

            <div className="container-fluid">
                <div className="row d-flex justify-content-center">
                    <div className="col-8">

                        <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" onChange={handleChangenumber} placeholder="Number" /> */}
                                <input type="text" 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="option"/>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" placeholder="보기를 입력하세요"  onChange={handleChangechoose} />
                                </div>
                                {selectOption}

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

export default Admin