import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import { InputAdornment, TextField, Button } from "@material-ui/core";
import AccountCircle from "@material-ui/icons/AccountCircle";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
import BusinessIcon from "@material-ui/icons/Business";
import axios from "axios";
import { withRouter } from "react-router-dom";
import compose from "recompose/compose";

const styles = theme => ({
  margin: {
    margin: theme.spacing(1)
  }
});

class RegisterShopPage extends Component {
  state = {
    name: "",
    email: "",
    password: "",
    password2: "",
    address: "",
    tel: "",
    rolr: "1"
  };

  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 {  } = this.state;
    const { name, email, password, password2, address, tel, role } = this.state;
    return (
      <div className="row center">
        <h2>ลงทะเบียนธุรกิจ</h2>
        <br></br>
        <div>
          <TextField
            className={classes.margin}
            id="name"
            name="name"
            value={name}
            label="ชื่อ-สกุล*"
            variant="outlined"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AccountCircle />
                </InputAdornment>
              )
            }}
            onChange={this.handleChange}
          />

          <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}
          />

          <TextField
            className={classes.margin}
            id="password2"
            name="password2"
            value={password2}
            label="Confirm-Password*"
            type="password"
            autoComplete="current-password"
            variant="outlined"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <VpnKeyIcon />
                </InputAdornment>
              )
            }}
            onChange={this.handleChange}
          />
        </div>
        <br></br>
        <div>
          <TextField
            className={classes.margin}
            id="address"
            name="address"
            value={address}
            label="ที่อยู่"
            autoComplete="address"
            variant="outlined"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <BusinessIcon />
                </InputAdornment>
              )
            }}
            onChange={this.handleChange}
          />
          <TextField
            className={classes.margin}
            id="tel"
            name="tel"
            value={tel}
            label="เบอร์โทร"
            autoComplete="Phone number"
            variant="outlined"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <ContactPhoneIcon />
                </InputAdornment>
              )
            }}
            onChange={this.handleChange}
          />
        </div>
        <br></br>

        <div className={classes.root}>
          <Button variant="contained" color="secondary">
            ยกเลิก
          </Button>{" "}
          &nbsp; &nbsp; &nbsp;
          <Button
            variant="contained"
            color="primary"
            onClick={() => {
              if (password === password2) {
                axios
                  .post("http://localhost:9000/api/auth/register", {
                    email: email,
                    password: password,
                    name: name,
                    address: address,
                    tel: tel,
                    role: "1"
                  })
                  .then(response => {
                    console.log("สร้างผู้ใช้สำเร็จ", response);
                    this.props.history.push("/");
                  })
                  .catch(error => {
                    console.log(error);
                  });
                // alert("ลงทะเบียนสำเร็จ");
              } else {
                alert("password ไม่ถูกต้อง");
              }
            }}
          >
            ลงทะเบียน
          </Button>
        </div>
      </div>
    );
  }
}

export default compose(withStyles(styles), withRouter)(RegisterShopPage);
