
import React from 'react';
import {Link,useNavigate  } from 'react-router-dom';
import axios from 'axios';
import { useState,useEffect } from "react";
import { Helmet } from 'react-helmet';


function AdminLogin(navigation ) {
  const navigate = useNavigate();
  const [inputField , setInputField] = useState({username:'',password:''});

  const handleChange = (e) =>{
    const value = e.target.value;
    setInputField({
        ...inputField,
        [e.target.name]: value
    });
  }

  const handleSubmit = (e) =>{e.preventDefault();
    // var formData = new FormData();
    // //alert(formData);return false;
    // formData.append("username", inputField.username);
    // formData.append("password", inputField.password);
    // const config = {
    //     headers: {
    //       'content-type': 'multipart/form-data',
    //     },
    //   };  
    axios.post('http://localhost:8081/adminlogin_api', {username:inputField.username,password:inputField.password})
        .then((res) => {
        //console.log(res.data.status);return false;
        alert(res.data.message);
        if(res.data.status==1){
            localStorage.setItem('token',1);
            localStorage.setItem('isLoggedIn',true);
            navigate("/admin");
        }
        //if(res.status==1){this.componentDidMount();}
    }).catch((err) => alert("Couldnot reach to server"));    
}


  return (
    <div className='wrapper'>
      <Helmet>
        <title>Fantasy Cricket</title>
        <link rel="stylesheet" href="/assets/css/bootstrap/bootstrap.min.css"/>
        <link rel="stylesheet" href="/assets/css/custompages/login1.css"/>
        <link rel="stylesheet" href="/assets/css/fonts/fonts-style.css"/>
        <script src="/assets/js/jquery/jquery.min.js"></script>
        <script src="/assets/js/bootstrap/bootstrap.min.js"></script>
      </Helmet>
      <div className="content-wrapper">
			<div className="mx-auto login">
				<img src="assets/images/logo-signin.png" className="img-circle" alt="Logo Image"/>
				<div className="card card-signin mt-4">
					<div className="card-body">
						<h5 className="card-title text-center">Sign In</h5>
						<form className="form-signin" method='post'  onSubmit={handleSubmit}>
							<div className="form-label-group">
								<input type="text" name="username" onChange={handleChange} className="form-control" placeholder="Username" required autofocus/>
							</div>
							<div className="form-label-group">
								<input type="password" onChange={handleChange}  name="password"  className="form-control" placeholder="Password" required/>
							</div>
							{/* <Link to="/admin" className="btn btn-lg btn-primary btn-block text-uppercase text-center">Sign in</Link> */}
							<button type="submit" className="btn btn-lg btn-primary btn-block text-uppercase text-center">Login</button>
							
						</form>
					</div>
				</div>
			</div>
		</div>
    </div>
  );
}

export default AdminLogin;
