import './login.scss';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

let store = createStore((state = {name: null,passwd: null},action) => {
    switch(action.type){
        case "UPDATE_NAME": 
            return {
                name: action.name,
                passwd: state.passwd
            };
        case "UPDATE_PASSWD":
            return {
                name: state.name,
                passwd: action.passwd
            };
        case "UPDATE": 
            return {
                name: action.name,
                passwd: action.passwd
            }
        default: return state;
    }
});


class Login extends Component {

    constructor(props){
        super(props);
        this.state = {
            loginName: null,
            loginPasswd: null,
        };
    }

    inputName = e => {
        this.setState({
            loginName: e.target.value
        });

        // this.props.dispatch({
        //     type: "UPDATE_NAME",
        //     name: e.target.value
        // });
    }

    inputPasswd = e => {
        this.setState({
            loginPasswd: e.target.value
        });

        // this.props.dispatch({
        //     type: "UPDATE_PASSWD",
        //     passwd: e.target.value
        // });
    }

    submit = e => {
        let name = this.state.loginName;
        let passwd = this.state.loginPasswd;
        let data = {
            name,
            passwd
        }
        console.log(data);
    }

    render(){
        let name = this.state.loginName;
        // let name = this.props.data.name;
        return (
            <section className="login">
                <div className="login-title">
                    登录
                </div>
                <div className="login-name">
                    {name?<img src={`https://api.dev.ourfor.top/qq/${name}`} />:null}
                    <input type='text' onChange={this.inputName} placeholder="用户名" className="login-name" />
                    {name?<button className="login-select"></button>:null}
                </div>
                <div className="login-passwd">
                    <input type='password' onChange={this.inputPasswd} placeholder="密码" className="login-passwd" />
                </div>
                <div className="login-submit">
                    <button type="submit" onClick={this.submit}></button>
                </div>
                <div className="login-other">
                    <div className="login-help">
                        <span className="recovery">忘记密码</span>
                        <span className="signup">用户注册</span>
                    </div>
                    <div className="login-read">登录即代表阅读并同意<span className="read-more">服务协议</span></div>
                </div>
            </section>
        );
    }
}

let LoginWithStore = connect(state => ({data: state}))(Login)

let LoginWrap = props => (
    <Provider store={store}>
        <LoginWithStore />
    </Provider>  
);

export { Login };
export default Login;