import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button } from 'components/Form'
import { FormattedMessage } from '../../locale'
import { isNullOrEmpty, isEmail, LOG } from 'utils'

class Login extends Component {
    static propTypes = {
        onForget: PropTypes.func,
        onSuccess: PropTypes.func,
        onRegister: PropTypes.func,
        styles: PropTypes.object
    }
    static defaultProps = {
        onForget: () => { LOG('忘记密码prop未定义') },
        onSuccess: () => { LOG('登录成功prop未定义') },
        onRegister: () => { LOG('注册prop未定义') }
    }
    state = {errorInfo: '', loading: false}
    handleSub = () => {
        const username = document.querySelector('#username').value
        const pwd = document.querySelector('#pwd').value
        const remember = document.querySelector('#remember').checked

        LOG('用户名：' + username)
        LOG('密码：' + pwd)
        LOG('记住密码：' + remember)
        if (isNullOrEmpty(username)) {
            this.setState({errorInfo: '请输入邮箱地址或电话号码'})
            return false
        }
        if (!isEmail(username)) {
            this.setState({errorInfo: '请输入正确的邮箱地址'})
            return false
        }
        if (isNullOrEmpty(pwd)) {
            this.setState({errorInfo: '请输入密码'})
            return false
        }

        this.setState({errorInfo: '', loading: true})

        this.props.onSuccess()
    }
    componentWillMount() {
    }

    render () {
        const {onRegister, onForget, styles} = this.props
        return (
            <div className={`${styles.login} ${styles.form}`}>
                <p>
                    <FormattedMessage id='loginView.title' />
                </p>
                <ul className={`${styles.oauth} clearFix`}>
                    <li className={styles.wx}>wx</li>
                    <li className={styles.facebook}>facebook</li>
                    <li className={styles.twitter}>twitter</li>
                    <li className={styles.weibo}>weibo</li>
                </ul>
                <div className={styles.con}>
                    <i />
                    <p>或</p>
                </div>
                <ul>
                    <li>
                        <FormattedMessage id='loginView.email'>
                            {(msg) => (
                                <input id='username' className={`${styles.inputText} ${styles.email}`}
                                       placeholder={msg}
                                       type='text' />
                            )}
                        </FormattedMessage>

                    </li>
                    <li>
                        <FormattedMessage id='loginView.password'>
                            {(msg) => (
                                <input id='pwd' className={`${styles.inputText} ${styles.pwd}`}
                                       placeholder={msg}
                                       type='password' />
                            )}
                        </FormattedMessage>
                    </li>
                    <li className={styles.remember}><label><input id='remember' type='checkbox' /><FormattedMessage
                        id='loginView.remember' /></label>
                        <a className={styles.forget} onClick={onForget}> <FormattedMessage id='loginView.forget' /></a>
                    </li>
                    <li className={styles.error}>{this.state.errorInfo}</li>
                    <li>
                        <Button enterSub loading={this.state.loading} onClick={this.handleSub}><FormattedMessage
                            id='loginView.login' /></Button>
                    </li>
                </ul>
                <div className={styles.account}>
                    <p><FormattedMessage id='loginView.noAccount' /></p>
                    <button onClick={onRegister} className={styles.btnSmall}><FormattedMessage id='loginView.register' />
                    </button>
                </div>
            </div>
        )
    }
}
export default Login