// 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 handleClick() {
        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 (
        <div className="container-fluid bg-light p-5 h-100">
            {admin ? <Redirect to='/admin' /> : ''}
            {done ? <Redirect to='/quiz' /> : ''}
            
            <div>
                <h3 className="text-center pb-5 font-weight-bold text-danger" style={{'font-family':'sans-serif'}}>Korea University</h3>
            </div>

            <div className="row justify-content-center">
                <form className="col-4 p-5 border bg-white">
                    <div>
                        <div>
                            <p className="font-weight-bold h5 pb-3">로그인</p>
                        </div>
                        <div className="form-group">
                            <label for="inputName">이름입력</label>
                            <input className="form-control" onChange={handleChangename} placeholder="Name" />
                        </div>
                        <div className="form-group">
                            <label for="inputPassword">비밀번호</label>
                            <input type='password' className="form-control" onChange={handleChangepassword} placeholder="Password" />
                        </div>
                        <div className="form-group text-center">
                            <label for="inputLogin" className="d-flex justify-content-center"> </label>
                            <button className="mt-4 btn btn-dark" onClick={handleClick}>Login</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>

    )
}

export default Home;