import React,{PropTypes} from 'react'
import {reduxForm,Field,submit,SubmissionError, initialize, formValueSelector,getFormValues} from 'redux-form';
import InputField from './widget/reduxForm/InputField';
import {connect} from 'react-redux';
import { Button,Tabs,Steps,Checkbox,Icon } from 'antd';
const TabPane = Tabs.TabPane;
const Step = Steps.Step;
import cx from 'classnames';
import l from './loginFormLess.les';
import { sendLoginSmsCode,doRegister,changeRegisterStatus } from '../redux/actions/authed';
import { required,mobile,minValue,maxLength,number,password } from './widget/reduxForm/validate';

class RegisterForm extends React.Component {
	constructor(props) {
		super(props);

		this.nextStep        = this.nextStep.bind(this);
		this.prevStep        = this.prevStep.bind(this);
		this.finishStep      = this.finishStep.bind(this);
		this.myRegister      = this.myRegister.bind(this);
		this.changeCheck     = this.changeCheck.bind(this);
		this.linkLogin       = this.linkLogin.bind(this);
		this.sendcodeCode    = this.sendcodeCode.bind(this);
		this.renderStepOne   = this.renderStepOne.bind(this);
		this.renderStepTwo   = this.renderStepTwo.bind(this);
		this.renderStepThree = this.renderStepThree.bind(this);
		this.subtractCount   = this.subtractCount.bind(this);
		this.changeMobile    = this.changeMobile.bind(this);

		this.state={
			current   :0,
			countTime :0,
			runCount  :false,
			init      :false,
			userMobile:'',
			isChecked:false
		}
	}
	componentDidMount() {
	}
	componentWillReceiveProps(nextProps){
		const {myValues,error}=nextProps;
		const {current}=myValues;
		if(this.props.myValues&&this.props.myValues.current!=current){
			this.setState({
				current:current
			});
		}
    }
	componentWillUnmount(){
		clearInterval(this.timer)
	}

	nextStep(){ //下一步
		const { current } = this.state;
		const {touch,dispatch,change,valid,submit,myValues={}} = this.props;
		dispatch(submit());
		if(current>2){
			// this.setState({
			// 	current:2
			// });
			dispatch(change('current',2));
			clearInterval(this.timer)

		}else if(current<1&&valid){
			if(current == 0){
				this.sendcodeCode();
			}
			dispatch(change('current',current +1));
			this.setState({
				current:current +1
			});
		}else if(myValues.current==1&&valid){
			dispatch(change('current',current +1));
			this.setState({
				current:2
			});
			clearInterval(this.timer)
		}
	}

	prevStep(){ //返回上一步
		const { current } = this.state;
		const {change,dispatch} = this.props;
		dispatch(change('current',current-1));
		this.setState({
			current  :Number(current - 1),
			init     :false,
			countTime:0,
			runCount  :false,

		});
		clearInterval(this.timer)
	}


	finishStep(){//提交表单
		const { dispatch,submit } = this.props;
		dispatch(submit());
	}

	myRegister(e){//键盘事件
    	const {dispatch,submit}=this.props;
		if(e.keyCode == 13){
    		dispatch( submit());
    	}
	}
	changeCheck(e){
		this.setState({
			isChecked:e.target.checked
		});
	}

	linkLogin(){
		const {dispatch} = this.props;
		dispatch(changeRegisterStatus(false))
		window.location = '#/login';
	}

	sendcodeCode(){
		clearInterval(this.timer);
		const { dispatch,current } = this.props;
		const { userMobile } = this.state;
		this.setState({
			runCount :true,
			countTime:60
		});
		setTimeout(()=>{
			dispatch(sendLoginSmsCode({
				'mobile':userMobile,
				'type':'register',
				'scope':'global_access:tenant_admin'
			},current));
			// dispatch(submit());
		},300);
		this.timer=setInterval(this.subtractCount,1000);
	}

	subtractCount(){
		const { runCount,countTime } = this.state;
		console.log("进入倒计时")
		if(runCount&&countTime>0){
            this.setState({
                countTime:countTime-1
            })
        }else if(countTime<=0){
            this.setState({
							runCount:false,
							init    :true
            });
						clearInterval(this.timer);
        }
	}

	changeMobile(e){//输入手机号 input
		const { dispatch,change } = this.props;
		this.setState({
			userMobile:e.target.value
		});
		dispatch(change('mobile',e.target.value));
	}

	renderStepOne(){ //第一步

		const { current,isChecked } = this.state;
		return(
			<div>
				<div className={cx(l.login_tab_content,'login_input')}>
					<InputField type='text' name='mobile' onChange={this.changeMobile} optionValue='mobile' placeholder='请输入手机号'  />
				</div>
				<div className={cx(l.step_action,'register_check')}>
					<Button disabled={isChecked?false:true} type="primary" onClick={this.nextStep.bind(current)}>下一步</Button>
        		</div>
				<div className={cx(l.step_action,'register_check')}>
	        		<Checkbox checked={isChecked} onChange={this.changeCheck}></Checkbox><a href="https://hropublic.oss-cn-beijing.aliyuncs.com/hro_template/%E3%80%8AWORKAI%E7%94%A8%E6%88%B7%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE%E3%80%8B.doc">我已阅读并同意接受使用《workai使用协议》</a>
	        		<div className={cx(l.register_tip)} onClick={this.linkLogin}>我有账号,直接登录</div>
        		</div>
			</div>
		)
	}

	renderStepTwo(){ //第二步

		const { runCount,countTime,init,current } = this.state;

		return(
			<div>
				<div className={cx(l.login_tab_content,'login_input')}>
					<InputField type='text' name='sms_code' placeholder='请输入您收到的验证码'/>
					<div className={cx('getCode')}>
						<Button onClick={this.sendcodeCode.bind(this)} disabled={runCount?true:false}>{runCount?(countTime+' s'):init&&!runCount?'重新获取':'获取验证码'}</Button>
					</div>
				</div>
				<div className={cx(l.step_action,'register_check')}>
					<Button type="primary" onClick={this.nextStep.bind(current)}>下一步</Button>
					<div className={runCount?cx(l.gray_button):cx(l.register_prev)} onClick={runCount?()=>{}:this.prevStep}>返回上一步</div>
				</div>
			</div>
		)

	}

	renderStepThree(){ //第三步
		return(
			<div>
				<div className={cx(l.login_tab_content,'login_input')}>
					<InputField type='text' name='name' placeholder='请输入公司名称'  onKeyUp={this.myRegister}/>
					<InputField type='text' name='username' placeholder='请输入姓名'  onKeyUp={this.myRegister}/>
					<InputField type='password' name='password' placeholder='请设置密码'  onKeyUp={this.myRegister} />
				</div>
				<div className={cx(l.step_action,'register_check')}>
					<Button type="primary" onClick={this.finishStep}>完成</Button>
					<div className={cx(l.register_prev)} onClick={this.prevStep}>返回上一步</div>
				</div>
			</div>
		)
	}


	render() {
		const { current } = this.state;
		const { registerSeccess } =this.props;
		return(
			<div className={cx('register')}>
				{
					registerSeccess ?
					(
						<div style={{textAlign:'center'}}>
							<Icon type="check-circle" style={{fontSize:'40px',color:'#3CC43C'}}/>
							<div className={cx(l.success_con)}>
								您的资料我们已经收到，<br/>
								客服将在1 - 3 个工作日内为您开通试用服务。<br/>
								您也可以直接拨打400-1616-030电话快速咨询开通。
							</div>
					        <Button type="primary" onClick={this.linkLogin}>确定</Button>
						</div>
					):(
						<div>
							<div className={cx(l.register_title)}>
								<p style={{display:'inline-block',verticalAlign:'-webkit-baseline-middle'}}>
									<span>欢迎注册 WORK AI</span><br/>
									<span>互联网转型从这一步开始</span>
								</p>
							</div>
							<Steps size='default' current={current}>
					           <Step key={0}/>
					           <Step key={1}/>
					           <Step key={2}/>
					        </Steps>
					        <div>
					        	{
						        	current == 0 ? (this.renderStepOne()):
						        	current == 1 ? (this.renderStepTwo()): (this.renderStepThree())
					        	}
					        </div>
					        <InputField type='hidden' name='current'/>
					        <div style={{color:'red',marginBottom:'8px'}}>{this.props.error}</div>
						</div>
					)
				}
	      	</div>
		)
	}
}

const submitForm=(values,dispatch,props)=>{
	if(values.current=='2'){
		return dispatch(doRegister(values));
	}
}
const validate=(values,props)=>{
	const errors={};
	if(values.current=='0'){
		if(required(values.mobile)){
			errors.mobile=required(values.mobile);
		}else if(mobile(values.mobile)){
			errors.mobile=mobile(values.mobile);
		}
	}else if(values.current=='1'){
		if(required(values.sms_code)){
			errors.sms_code=required(values.sms_code);
		}else if(number(values.sms_code)){
			errors.sms_code=number(values.sms_code);
		}
	}else if(values.current=='2'){
		if(required(values.name)){
			errors.name=required(values.name);
		}
		if(required(values.username)){
			errors.username=required(values.username);
		}
		if(required(values.password)){
			errors.password=required(values.password);
		}else if(password(values.password)){
			errors.password=password(values.password);
		}
	}
	return errors;
}

const selector = formValueSelector('register_form');

RegisterForm = reduxForm({
  form: 'register_form',
  onSubmit:submitForm,
  validate,
  initialValues:{current:'0'}
})(RegisterForm);


const mapState=(state) => {
	const {authed:{registerSeccess}}=state;
  return {
  		myValues: getFormValues('register_form')(state),
  		registerSeccess
  };

}

export default connect(mapState)(RegisterForm);