import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button } from 'components/Form'
import { LOG } from 'utils'
import CheckCode from 'components/VerificationCode/CheckCode'
import { ApiServer } from 'api/restful'
import VerificationCode from 'components/VerificationCode'

export default class Login extends Component {
    static propTypes = {
        onSuccess: PropTypes.func,
        onLogin: PropTypes.func,
        styles: PropTypes.object,
        config: PropTypes.object
    }
    state = {errorInfo: '', loading: false}
    geetestCode = null
    verifyCodeToken = []
    verifyCode = null
    static defaultProps = {
        onSuccess: () => { LOG('注册成功prop未定义') },
        onLogin: () => { LOG('登录按钮prop未定义') }
    }
    handleSub = () => {
        ApiServer.register(
            {
                app: this.props.config.appID,
                username: document.querySelector('#username').value,
                password: document.querySelector('#password').value,
                nickname: document.querySelector('#nickname').value,
                verifyCode: document.querySelector('#verifyCode').value,
                verifyCodeToken: this.verifyCodeToken
            }
        ).then((res) => {
            this.props.onSuccess()
        })
    }
    handleGetCode = () => {
        if (this.geetestCode) {
            ApiServer.getVerifyCode({username: document.querySelector('#username').value, ...this.geetestCode})
                .then((res) => {
                    console.log('code', res)
                    this.verifyCodeToken.push(res.data.data.verifyCodeToken)
                })
            return true
        } else {
            alert('请先点击按钮进行验证')
        }
        return false
    }
    VerificationCodeSuccess = (res) => {
        if (res) {
            this.geetestCode = {
                challenge: res.geetest_challenge,
                seccode: res.geetest_seccode,
                validate: res.geetest_validate
            }
        }
    }
    render () {
        const {onLogin, styles} = this.props
        return (

            <div className={`${styles.register} ${styles.form}`}>
                <p className={styles.title}>用户注册</p>
                <ul>
                    <li><input id='username' className={`${styles.inputText} ${styles.email}`} placeholder='邮箱地址或电话号码'
                               type='text' />
                    </li>
                    <li>
                        <VerificationCode onSuccess={this.VerificationCodeSuccess} />
                    </li>
                    <li>
                        <CheckCode id='verifyCode' onClick={this.handleGetCode} />
                    </li>
                    <li><input id='nickname' className={`${styles.inputText} ${styles.username}`} placeholder='用户名'
                               type='text' /></li>
                    <li><input id='password' className={`${styles.inputText} ${styles.pwd}`} placeholder='密码'
                               type='password' />
                    </li>

                </ul>
                <p className={styles.tips}>点击"注册"即表示我同意Microduino的隐私政策. </p>
                <a className={styles.more}>了解更多</a>
                <p className={styles.error}>{this.state.errorInfo}</p>
                <Button onClick={this.handleSub}>注册</Button>

                <div className={styles.account}>
                    <p>已有账号，请直接登录.</p>
                    <button onClick={onLogin} className={styles.btnSmall}>登录</button>
                </div>
            </div>

        )
    }
}