import React, { Component } from "react";
import { Link } from "react-router-dom";
import queryString from "query-string";
import { Button, Input, message, Checkbox } from "antd";
import IconFont from "../../../components/IconFont";
import styles from "./index.module.less";
import { connect } from "react-redux";
import { changeLoginInfo, DATA_NAME } from "../../../redux/action/LoginInfoAction.js";
import axios from "../../../util/httpUtil";
import { LoginLayout, LOGIN_TYPE } from "../../../layout/LoginLayout";

function mapStateToProps(state) {
  return state[DATA_NAME];
}

function mapDispatchToProps(dispatch) {
  return {
    updateLoginInfo: (token, userInfo) => dispatch(changeLoginInfo(token, userInfo))
  };
}

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      rememberMe: false
    };
    this.query = queryString.parse(window.location.search);
  }

  valueChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  submit = () => {
    axios.post("/public/login", this.state).then(res => {
      localStorage.setItem("token", res.token);
      localStorage.setItem("userInfo", JSON.stringify(res.userInfo));
      window.token = res.token;
      window.userInfo = res.userInfo;
      message.success("登录成功");
      this.props.updateLoginInfo(res.token, res.userInfo);
      if (this.query.redirect) {
        this.props.history.replace(decodeURIComponent(this.query.redirect));
      } else {
        this.props.history.replace("/");
      }
    });
  };

  render() {
    const { email, password, rememberMe } = this.state;
    return (
      <LoginLayout type={LOGIN_TYPE}>
        <div className={styles.main}>
          <Input type="text" size="large" name="email" value={email} onChange={this.valueChange} addonBefore={<IconFont type="icon-mail" style={{ fontSize: "0.3rem" }} />} placeholder="邮箱" />
          <Input type="text" size="large" name="password" value={password} onChange={this.valueChange} addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />} placeholder="密码" />
          <div className={styles.action}>
            <Checkbox value={rememberMe} name="rememberMe" onChange={this.valueChange}>
              记住我
            </Checkbox>
            <Link to="/public/resetPassword">忘记密码</Link>
          </div>
          <Button type="primary" onClick={this.submit} block>
            登录
          </Button>
        </div>
      </LoginLayout>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login);