import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import { withRouter } from "react-router-dom";
import compose from "recompose/compose";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import InputAdornment from "@material-ui/core/InputAdornment";
import FormControl from "@material-ui/core/FormControl";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import AccountCircle from "@material-ui/icons/AccountCircle";
import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import Button from "@material-ui/core/Button";
import Link from "@material-ui/core/Link";
import axios from "axios";

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">
          <br />
          <br />
          <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>
          <br></br>
          <div>
            <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>
          <br></br>
          <div>
            <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) {
                      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");
                      }
                    }
                  })
                  .catch(error => {
                    console.log(error);
                  });
                // alert("ลงทะเบียนสำเร็จ");
              }}
            >
              เข้าสู่ระบบ
            </Button>
          </div>
          <br />
          <br />
          <div className="row center">
            <h4>
              คุณลืมรหัสผ่าน ? <Link href="/">Forgot Password</Link>
            </h4>
          </div>
          <div className="row center">
            <h4>
              คุณยังไม่ลงทะเบียน ? <Link href="/RegisterPage">ลงทะเบียน</Link>
            </h4>
          </div>
        </div>
      </div>
    );
  }
}
export default compose(withStyles(styles), withRouter)(Login);
