import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button } from 'components/Form'
import VerificationCode from 'components/VerificationCode'
import CheckCode from 'components/VerificationCode/CheckCode'

import { LOG } from 'utils'

export default class ChangeEmailOrMobile extends Component {
    static propTypes = {
        onSuccess: PropTypes.func,
        styles: PropTypes.object,
        step: PropTypes.number,
        type: PropTypes.oneOf(['mobile', 'email'])
    }
    static defaultProps = {
        type: 'email',
        onSuccess: () => { LOG('重置成功prop未定义') },
        step: 1
    }
    handelSendEmail = () => {
        alert('验证码已经发送到您的邮箱，请查收，并通过验证码进行修改操作')
    }
    handelReset = () => {
        this.props.onSuccess()
    }
    state = {errorInfo: '', loading: false}

    render () {
        const {styles, step, type} = this.props

        let title = '邮箱地址'
        if(type === 'mobile') {
            title = '电话号码'
        }

        let view = null
        if (step === 1) {
            view =
                <div>
                    <p className={styles.title}>修改注册{title}</p>
                    <input className={`${styles.inputText} ${styles.email}`} placeholder={`注册时填写的${title}`} type='text' />
                    <VerificationCode />
                    <p className={styles.error}>{this.state.errorInfo}</p>
                    <Button timeout={5} onClick={this.handelSendEmail}>确认</Button>
                </div>
        } else if (step === 2) {
            view =
                <div>
                    <p className={styles.title}>修改注册{title}</p>
                    <input className={`${styles.inputText} ${styles.email}`} placeholder={`新的${title}`} type='text' />
                    <CheckCode />
                    <p className={styles.error}>{this.state.errorInfo}</p>
                    <Button onClick={this.handelReset}>确认修改</Button>
                </div>
        }
        return (
            <div className={`${styles.changeEmail} ${styles.form}`}>
                {view}
            </div>
        )
    }
}