import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import { withRouter } from "react-router-dom";
import compose from "recompose/compose";
import {InputAdornment,TextField,Button,Link } from "@material-ui/core";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import axios from "axios";
import { connect } from "react-redux";
import { setUser } from "../../actions/user";
const styles = theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
      width: 200
    }
  }
});
class Login extends Component {
  state = {
    email: "",
    password: "",
    role: ""
  };

  handleChange = event => {
    console.log("name : ", event.target.name);
    console.log("value : ", event.target.value);

    this.setState({
      [event.target.name]: event.target.value
    });
  };

  render() {
    const { classes } = this.props;
    const { email, password, role } = this.state;

    return (
      <div>
        <div className="row center">
         
          <div className="row  mt-5 ">
            <h2>เข้าสู่ระบบ</h2>
          </div>
          <div>
            <TextField
              className={classes.margin}
              id="email"
              name="email"
              value={email}
              label="E_mail"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <MailOutlineIcon />
                  </InputAdornment>
                )
              }}
              onChange={this.handleChange}
            />
          </div>
         
          <div className="row  mt-3 ">
            <TextField
              className={classes.margin}
              id="password"
              name="password"
              value={password}
              label="Password"
              type="password"
              autoComplete="current-password"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <VpnKeyIcon />
                  </InputAdornment>
                )
              }}
              onChange={this.handleChange}
            />
          </div>
        
          <div className="row  mt-3 ">
            <Button
              variant="contained"
              color="primary"
              disableElevation
              onClick={() => {
                axios
                  .post("http://localhost:9000/api/auth/login", {
                    email: email,
                    password: password
                  })
                  .then(async response => {
                    const token = response.data.token;
                    localStorage.setItem("token", token);
                    const user = await axios.get(
                      "http://localhost:9000/api/auth/currentUser",
                      { headers: { token: token } }
                    );
                    if (user) {
                      this.props.setUser(user.data);
                      if (user.data.role === 0) {
                        this.props.history.push("/");
                      } else if (user.data.role === 1) {
                        this.props.history.push("/DataShopPage");
                      } else {
                        this.props.history.push("/BeauticianShopPage");
                      }
                    }
                      alert("เข้าสู่ระบบสำเร็จ");
                  })
                  .catch(error => {
                    alert("email หรือ password ไม่ถูกต้อง");
                    console.log(error);
                  });
                // alert("ลงทะเบียนสำเร็จ");
              }}
            >
              เข้าสู่ระบบ
            </Button>
          </div>
          <br />
          <br />
          
          <div className="row center mt-5">
            <h4>
              คุณยังไม่ลงทะเบียน ? <Link href="/RegisterPage">ลงทะเบียน</Link>
            </h4>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
    
})

const mapDispatchToProps = dispatch => {
  return {
    setUser: (userData) => dispatch(setUser(userData))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(compose(withStyles(styles), withRouter)(Login));
