import React,{useState} from 'react'
import Axios from 'axios'
import { useDispatch} from 'react-redux';
import {loginUser} from '../../../_actions/user_actions';

function LoginPage(){
    const dispatch = useDispatch();
    const [Email, setEmail] = useState("")
    const [PassWord, setPassWord] = useState("")

    const onEmailHandler = (event) => {
        setEmail(event.currentTarget.value)
    }

    const onPassWordHandler = (event) => {
        setPassWord(event.currentTarget.value)
    }

    const onSubmitHandler = (event) => {
        event.preventDefault();


        let body = {
            email: Email,
            password: PassWord
        }

        dispatch(loginUser(body))

        
    }

    return (
        <div style = {{
            display: 'flex', justifyContent: 'center', alignItems: 'center'
            , width: '100%', height: '100vh'
        }}>
           <form style = {{display :'flex', flexDirection: 'column'}}
               onSubmit= {onSubmitHandler}
           >
               <label>Email</label>
               <input type = "email" value = {Email} onChange={onEmailHandler} />
               <label>PassWord</label>
               <input type = "password" value= {PassWord} onChange = {onPassWordHandler} />
               <br />
               <button type = "submit">
                   Login
               </button>

           </form>
       </div>
    )

}

export default LoginPage