// import bg from './img_study.jpg'
// import korea from './img_korea.jpg'
import React, { useState} from 'react'
import { Redirect } from 'react-router-dom';

function Home() {
    const [name, setName] = useState('')
    const [password, SetPassword] = useState('')
    const [done, setDone] = useState(false)

    const [admin, setAdmin] = useState(false);

    const handleChangename = (event) => {
        setName(event.target.value)
    }
    const handleChangepassword = (event) => {
        SetPassword(event.target.value)
    }

    function checking() {
        if (!name) {
            alert('이름을 입력하세요')
        }
        else if (!password) {
            alert('비밀번호를 입력하세요')
        }
        else if (name === 'admin' && password === '0001') {
            console.log('done')

            return (setAdmin(true)

            )
        }
        else if (password !== '0319') {
            alert('유효한 비밀번호를 입력하세요')
        }
        else {
            alert('입력하신 이름은 ' + name + '입니다.')
            localStorage.setItem('name', name)
            localStorage.setItem('password', password)
            setDone(true)
        }

    }




    return (
        <>
            {admin ? <Redirect to='/admin' /> : ''}

            {done ? <Redirect to='/quiz' /> : ''}
            {/* <div style={{ backgroundImage: 'url(' + bg + ')', backgroundColor: "grey", backgroundSize: "100%", width: "100%", height: "880px", backgroundRepeat: 'no-repeat' }}> */}
            <div className="Main"></div>
            <div style={{ fontSize: '70px', marginBottom: '100px', textAlign: 'center', backgroundColor: '#AE0E36' }}>
                {/* <img alt='korea' src={korea} width='10%'/> */}
                KOREA UNIVERSITY
            </div>


            <div className="d-flex justify-content-center ">

                <table className="table table-bordered dark-table" style={{ width: "400px" }}>
                    <thead className="text-center">
                        <tr style={{ height: "0 px" }}>정보 입력</tr>
                    </thead>
                    <tbody className="text-center">
                        <tr>
                            <td>이름 입력<input className="ml-2 inputBox" onChange={handleChangename} /></td>
                        </tr>
                        <tr>
                            <td>비밀번호<input type='password' className="ml-2 inputBox" onChange={handleChangepassword} /></td>
                        </tr>
                        <tr>
                            <td>
                                <button className="mt-4 btn btn-dark" onClick={checking}>Login</button></td>
                        </tr>
                    
                    </tbody>
                </table>
            </div>

            {/* <div className="Box" style={{ border: 'solid', position: 'absolute', top: "300px", left: "68%"}} > */}
            {/* <div className="Name" style={{boxShadow: '5px 5px 5px 5px gray', border: 'solid', fontSize: '30px', position: "absolute", top: "300px", left: "68%" }}>
                    이름(Name)
                        <input style={{ padding: '5px', border: 'solid', borderRight: 'none', borderBottom: 'none', borderTop: 'none', marginLeft: '105px', inlineSize: '160px', blockSize: '40px', fontSize: '40px' }} onChange={handleChangename} />
                </div>
                <div className="Name" style={{ boxShadow: '5px 5px 5px 5px gray',border: 'solid', fontSize: '30px', position: "absolute", top: "360px", left: "68%" }}>
                    비밀번호(Password)
                        <input type='password' style={{ padding: '5px', border: 'solid', borderRight: 'none', borderBottom: 'none', borderTop: 'none', marginLeft: '0px', inlineSize: '160px', blockSize: '40px', fontSize: '40px' }} onChange={handleChangepassword} />
                </div>
                <div className='Box2'>
                    <button style={{boxShadow: '5px 5px 5px 5px gray', marginLeft: '82%', marginTop: '10%', blockSize: '50px', inlineSize: '175px', fontSize: '35px' }} className="QuizStart" onClick={checking}>Start !</button>
                </div> */}

            {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
            {/* </div> */}


            {/* </div> */}
        </>

    )
}

export default Home;