import React, {Component} from 'react';

import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";

import {getImageUrl, DragValidator,broadcastChannelPostMessage} from 'educoder';
import {Tabs, Input, Checkbox, Button, notification,Menu} from 'antd';
import passopen from '../../../src/images/login/passopen.png';
import passoff from '../../../src/images/login/passoff.png';
import axios from 'axios';
import DragValidatortwo from '../../../src/common/components/DragValidatortwo'
import './common.css'
const { TabPane } = Tabs;
const loginInputsyl = {
"width":"434px",
"height": "462px",
"-webkit-box-shadow": "3px 10px 21px 0px rgba(76,76,76,0.15)",
"box-shadow": "3px 10px 21px 0px rgba(76,76,76,0.15)",
"border-radius": "6px",
"background": "#fff"
}

//父组件EducoderLogin.js
class LoginRegisterComponent extends Component {
    constructor(props) {
        super(props)


        //
        // console.log("LoginRegisterComponent");
        // console.log("29");
        // console.log(props.loginstatus);
        if(props.loginstatus === true){
            // console.log(props.loginstatus);
            this.state = {
                tab:["0"],
                activeKey: 0,
                classpass: "text",
                // 登录
                passopens: passoff,
                seconds: 35,
                discodeBtn: false,
                clearInterval: false,
                autoLogin: true,
                classpassbool: false,
                // 注册
                readAgreement: false,
                getverificationcodes: true,
                dragOk: false,
                Agreetotheterms: false,
                login: "",
                password: "",
                logins: "",
                passwords: "",
                codes: "",
                Phonenumberisnotco: undefined,
                Phonenumberisnotcos: undefined,
                Phonenumberisnotcosyzm:undefined,
                Phonenumberisnotcosymmm:undefined,
                Phonenumberisnotcosytdhk:undefined,
                Phonenumberisnotcosyfwtk:undefined,
                Phonenumberisnotcobool: false,
                Whethertoverify:false,

            }
        }
        if(props.loginstatus === false){
            // console.log(props.loginstatus);
            this.state = {
                tab:["1"],
                activeKey: '1',
                classpass: "text",
                // 登录
                passopens: passoff,
                seconds: 35,
                discodeBtn: false,
                clearInterval: false,
                autoLogin: true,
                classpassbool: false,
                // 注册
                readAgreement: false,
                getverificationcodes: true,
                dragOk: false,
                Agreetotheterms: false,
                login: "",
                password: "",
                logins: "",
                passwords: "",
                codes: "",
                Phonenumberisnotco: undefined,
                Phonenumberisnotcos: undefined,
                Phonenumberisnotcosyzm:undefined,
                Phonenumberisnotcosymmm:undefined,
                Phonenumberisnotcosytdhk:undefined,
                Phonenumberisnotcosyfwtk:undefined,
                Phonenumberisnotcobool: false,
                Whethertoverify:false,

            }
        }
    }

// 点击表单后，改变type
    changeType = () => {
        this.setState({classpass: 'password'});
    }
    componentDidMount = () => {
        // console.log("componentDidUpdate");
        // console.log(this.props);
        if (this.props.match.url === "/login") {
            console.log("11111111111111111111111111");
            this.state = {
                tab:["0"],
            }
            this.onTabChange('0');
        } else if (this.props.match.url === "/register") {
            this.state = {
                tab:["1"],
            }
            this.onTabChange('1');
        }

    }
    openNotification = (messge,type) => {
        // type  1 成功提示绿色 2提醒颜色黄色 3错误提示红色
        notification.open({
            message: "提示",
            description: messge,
            onClick: () => {
                console.log('Notification Clicked!');
            },
        });
    }


    ;
    StudyMakeMoney = () => { // 调用父组件方法
        this.props.Setshowbool(3);
        // this.props.Setlogins(3);
        this.setState({
            login: "",
            password: "",
            logins: "",
            passwords: "",
            codes: "",
        })
    }
    onTabChange = (activeKey) => {
        console.log("onTabChange");
        // console.log(activeKey);
        // this.setState({activeKey})
    }
    // -------------------- LOGIN START
    //下次自动登入
    onAutoLoginChange = (e) => {
        this.setState({autoLogin: e.target.checked})
    }

    // -------------------- LOGIN END

    isCorrectname = (value, id) => {
        if (id === 1) {
            console.log(value.length);
            if (value.length === 0) {
                this.setState({
                    Phonenumberisnotco: undefined,
                    Phonenumberisnotcobool: false,
                })
                return;
            }
        } else if (id === 2) {
            if (value.length === 0) {
                this.setState({
                    Phonenumberisnotcos: undefined,
                    Phonenumberisnotcobool: false,
                })
                return;
            }
        }
        this.Emailphonenumberverification(value, id)

    }
    // -------------------- REGISTER START
    onReadAgreementChange = (e) => {
        this.setState({readAgreement: e.target.checked})
    }
    //是否验证通过
    dragOkCallback = () => {
        console.log(this.state.logins);
        this.Emailphonenumberverification(this.state.logins, 2)

    }
    // -------------------- REGISTER END

    //是否同意
    onChange = (e) => {
        this.setState({
            Agreetotheterms: e.target.checked,
        })
    }

    //登入接口
    postLogin = () => {
        if (this.state.login === undefined || this.state.login == "") {
            this.openNotification(`请输入登录手机号码或邮箱`,2);
            return
        } else if (this.state.password === undefined || this.state.password == "") {
            this.openNotification(`请输入密码`,2);
            return
        }
        var url = "/accounts/login.json";
        axios.post(url, {
            login: this.state.login,
            password: this.state.password,
        }).then((response) => {
            if (response === undefined) {
                return
            }
            if (response.status === 200) {
                if (response.data.status === 402) {
                    window.location.href = response.data.url;
                } else {
                    broadcastChannelPostMessage('refreshPage')
                    this.setState({
                        isRender: false
                    })
                    window.location.href = "/"

                }
            }


        }).catch((error) => {

        })

    }
    //注册接口
    postregistered = () => {
        // if (this.state.logins === undefined || this.state.logins === "") {
        //     this.openNotification(`请输入登录手机号码或邮箱`,2);
        //
        //     return
        // } else if (this.state.dragOk === false) {
        //     this.openNotification(`请拖动滑块验证`,2);
        //     return
        // } else if (this.state.codes === undefined || this.state.codes == "") {
        //     this.openNotification(`请输入验证码`,2);
        //     return
        // } else if (this.state.passwords === undefined || this.state.passwords == "") {
        //     this.openNotification(`请输入密码`,2);
        //     return
        // } else if (this.state.Agreetotheterms === false) {
        //     this.openNotification(`请同意服务协议条款`,2);
        //     return;
        // }
        if (this.state.logins === undefined || this.state.logins === ""||this.state.logins.length===0) {
            this.setState({
                Phonenumberisnotcos:"账号不能为空",
            })
            return
        } else if (this.state.dragOk === false) {
            // this.openNotification(`请拖动滑块完成验证`,2);
            this.setState({
                Phonenumberisnotcosytdhk:"请拖动滑块完成验证",
            })
            return
        } else if (this.state.codes === undefined || this.state.codes == ""||this.state.codes.length===0) {
            // this.openNotification(`请输入验证码`,2);
            this.setState({
                Phonenumberisnotcosyzm:"验证码不能为空",
            })
            return
        } else if (this.state.passwords === undefined || this.state.passwords == "" ||this.state.passwords.length===0) {
            this.setState({
                Phonenumberisnotcosymmm:"密码不能为空",
            })
            return
        } else if (this.state.Agreetotheterms === false) {
            this.openNotification(`请同意服务协议条款`,2);
            return;
        }
        var url = "/accounts/register.json";
        axios.post(url, {
            login: this.state.logins,
            password: this.state.passwords,
            code: this.state.codes,
        }).then((result) => {
            if(result){
                if(result.data.status===-2){
                    if(result.data.message==="验证码不正确"){
                        this.setState({
                            Phonenumberisnotcosyzm:"验证码不正确",
                        })

                        return;
                    }else if(result.data.message==="验证码已失效"){
                        this.setState({
                            Phonenumberisnotcosyzm:"验证码不正确",
                        })

                        return;
                    }
                }else {
                    this.setState({
                        logins: "",
                        dragOk: false,
                        codes: "",
                        passwords: "",
                        Agreetotheterms: "",
                    })
                    this.props.history.push("/interesse");
                }
                }
        }).catch((error) => {

        })
    }

    //邮箱手机号验证
    Emailphonenumberverification = (value, id) => {
        var url = `/accounts/valid_email_and_phone.json`;
        axios.get((url), {
            params: {
                login: value,
                type: 1,
            }
        }).then((result) => {
            //验证有问题{"status":1,"message":"success"}
            // console.log(result);
            // this.setState({dragOk: true})

            if(result){
                 if(result.data.status===-2){
                     if (id === 1) {
                         console.log(value.length);
                         if(result.data.message==="该手机号码或邮箱已被注册"){
                             this.setState({
                                 Phonenumberisnotco: undefined,
                                 Phonenumberisnotcobool: false,
                                 dragOk:true,
                             })
                         }else {
                             this.setState({
                                 Phonenumberisnotco: result.data.message,
                                 Phonenumberisnotcobool: true,
                                 dragOk:false,
                                 Whethertoverify:this.state.Whethertoverify===true?false:true,
                             })
                         }
                             return;
                     } else if (id === 2) {
                             this.setState({
                                 Phonenumberisnotcos: result.data.message,
                                 Phonenumberisnotcobool: true,
                                 dragOk:false,
                                 Whethertoverify:this.state.Whethertoverify===true?false:true,
                             })
                             return;
                     }
                 }else {
                     if (id === 1) {
                         console.log(value.length);
                             this.setState({
                                 Phonenumberisnotco: undefined,
                                 Phonenumberisnotcobool: false,
                                 dragOk:true,
                             })
                             return;
                     } else if (id === 2) {
                             this.setState({
                                 Phonenumberisnotcos: undefined,
                                 Phonenumberisnotcobool: false,
                                 dragOk:true,
                             })
                             return;
                     }
                 }
             }

        }).catch((error) => {

        })
    }
    //短信验证
    SMSverification = () => {
        var url = `/accounts/get_verification_code.json`;
        axios.get((url), {
            params: {
                login: this.state.logins,
                type: 1,
            }
        }).then((result) => {
            //验证有问题{"status":1,"message":"success"}
            // console.log(result);
            this.openNotification("验证码已发送，请注意查收!",2);


        }).catch((error) => {
            console.log(error);

        })
    }
    //显示和不显示密码
    Showandhide = (e) => {
        console.log("显示于隐藏");
        if (this.state.classpassbool === true) {
            this.setState({
                passopens:passoff ,
                classpass: "text",
                classpassbool: false,
            })
        } else {
            this.setState({
                passopens: passopen ,
                classpass: "password",
                classpassbool: true,
            })
        }

    }

    //倒计时
    getverificationcode = () => {
        console.log(this.state.Phonenumberisnotcobool);
        console.log(this.state.dragOk);
        if(this.state.logins === undefined || this.state.logins.length===0){
            this.openNotification("请输入手机号或邮箱");
            return;
        }
        //这是判断是否手机正确
        if(this.state.Phonenumberisnotcobool === true){
            this.openNotification(this.state.Phonenumberisnotcos);
            this.setState({
                Whethertoverify:this.state.Whethertoverify===true?false:true,
            })
            return;
        }
        if(this.state.dragOk===undefined||this.state.dragOk === false){
            this.openNotification("拖动滑块验证");
            return;
        }

        if (this.state.getverificationcodes === true) {
            this.setState({
                getverificationcodes: undefined,
            })
            let timer = setInterval(() => {
                this.setState((preState) => ({
                    seconds: preState.seconds - 1,
                }), () => {
                    if (this.state.seconds == 0) {
                        clearInterval(timer);
                        this.setState({
                            getverificationcodes: false,
                            seconds: 35,
                        })
                    }
                });
            }, 1000)
            this.SMSverification();
        } else {
            this.setState({
                getverificationcodes: undefined,
            })
            let timer = setInterval(() => {
                this.setState((preState) => ({
                    seconds: preState.seconds - 1,
                }), () => {
                    if (this.state.seconds == 0) {
                        clearInterval(timer);
                        this.setState({
                            getverificationcodes: false,
                            seconds: 35,

                        })
                    }
                });
            }, 1000)
            this.SMSverification();
        }
    }
    //滑动验证手机号

    //获取登入
    loginInputonChange = (e) => {
        // console.log(e.target.value);
        var stirngt;
        if(e.target.value.length>0){
            var str=  e.target.value.replace(/\s*/g,"")
            stirngt=str;
        }else{
            stirngt=  e.target.value;
        }

        if (e.target.value.length === 0) {
            this.setState({
                Phonenumberisnotco: undefined,
                Phonenumberisnotcobool: false,
                login: stirngt,
            })
        }else{
            this.setState({
                login: stirngt,
            })
        }

    }
    //失去焦点判断
    inputOnBlur = (e, id) => {
        this.isCorrectname(e.target.value, id);
        // this.Emailphonenumberverification(e.target.value, id);
    }
    //获取登入密码
    passwordonChange = (e) => {
        // console.log(e.target.value);
        var stirngt;
        if(e.target.value.length>0){
            var str=  e.target.value.replace(/\s*/g,"")
            stirngt=str;
        }else{
            stirngt=  e.target.value;
        }
        this.setState({
            password: stirngt,
        })
        // this.setState({
        //     password: e.target.value
        // })
    }
    //获取注册登入
    loginInputonChanges = (e) => {
        console.log(e.target.value);
        var stirngt;
          if(e.target.value.length>0){
           var str=  e.target.value.replace(/\s*/g,"")
              stirngt=str;
          }else{
              stirngt=  e.target.value;
          }
            if (e.target.value.length === 0) {
                this.setState({
                    Phonenumberisnotcos: undefined,
                    Phonenumberisnotcobool: false,
                    logins: stirngt,
                    dragOk:false,
                    Whethertoverify:this.state.Whethertoverify===true?false:true,
                })
            }else{
                this.setState({
                    logins: stirngt,
                    Phonenumberisnotcos: undefined,
                    dragOk:false,
                    Whethertoverify:this.state.Whethertoverify===true?false:true,
                })
            }

    }
    //获取注册密码
    passwordonChanges = (e) => {
        // console.log(e.target.value);
        var stirngt;
        if(e.target.value.length>0){
            var str=  e.target.value.replace(/\s*/g,"")
            stirngt=str;
        }else{
            stirngt=  e.target.value;
        }
        this.setState({
            passwords: stirngt,
            Phonenumberisnotcosymmm:undefined,
        })
    }
    //获取code
    codesonChange = (e) => {
        this.setState({
            codes: e.target.value,
            Phonenumberisnotcosyzm:undefined,
        })
    }
    //切换tab
    changeTab=(e)=>{
        this.setState({
            tab:e.key
        })
       console.log(e.key);
        if(e.key === 0){
            this.setState({
                Phonenumberisnotcos:undefined
            })
        }else{
            this.setState({
                Phonenumberisnotco:undefined
            })

        }

        // this.props.history.push(`/courses/${this.props.match.params.coursesId}/exercises/${this.props.match.params.Id}/student_exercise_list?tab=`+e.key)

    }
    loginonkeyup =(e)=>{
        if(e.keyCode==32){

            return false;
        }
    }
    render() {
        const {
            activeKey,
            // 登录
            autoLogin,
            classpass,
            passopens,
            seconds,
            getverificationcodes,
            Agreetotheterms,
            Phonenumberisnotco,
            Phonenumberisnotcos,
            codes,
            tab,
            dragOk,
            Whethertoverify,
            classpassbool,
            Phonenumberisnotcosytdhk,
            Phonenumberisnotcosyzm,
            Phonenumberisnotcosymmm,
            // 注册
            readAgreement,
        } = this.state
        // height: 346px;
        if (this.state.seconds === 0) {
            // window.location.href='http://www.cnblogs.com/a-cat/';
        }

        console.log(classpass);
        return (

            <div className="login_register_content" style={  parseInt(tab[0])==0?{height: "346px"} :{height: "490px"}}>


                <div>
                    <Menu mode="horizontal" selectedKeys={tab} onClick={this.changeTab}>
                        <Menu.Item key="0" className={tab===0?"active font-18":"font-18"}   > 登录</Menu.Item>
                        <Menu.Item key="1" className={tab===1?"active font-18":"font-18"}  >注册</Menu.Item>
                    </Menu>

                    {
                        parseInt(tab[0])==0 &&
                        <div style={{width: '340px'}}>
                            <style>
                                {
                                    `
														.ant-input {
																		font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
																		-webkit-box-sizing: border-box;
																		box-sizing: border-box;
																		margin: 0;
																		padding: 0;
																		list-style: none;
																		position: relative;
																		display: inline-block;
																		padding: 4px 11px;
																		width: 100%;
																		height: 38px;
																		font-size: 14px;
																		line-height: 1.5;
																		color: rgba(0, 0, 0, 0.65);
																		background-color: #fff;
																		background-image: none;
																		border: 1px solid #d9d9d9;
																		border-radius: 4px;
																		-webkit-transition: all .3s;
																		-o-transition: all .3s;
																		transition: all .3s;
																}
														  .loginInputzhuche{
																	width: 100%;
																	background-color: #fff!important;
																	height: 45px !important;
																	padding: 5px;

																}

                                `
                                }
                            </style>

                            <Input placeholder="请输入登录手机号码或邮箱" value={this.state.login}
                                   onChange={this.loginInputonChange}
                                   name="username"
                                   className="font-14 color-grey-9 loginInputzhuche"
                                   onBlur={(e) => this.inputOnBlur(e, 1)}
                                   style={{marginTop: '30px', height: '38px'}}></Input>

                            {
                                Phonenumberisnotco && Phonenumberisnotco != "" ?
                                    <p className="color-red  mt5 mb5" style={{width: " 100%", height: "20px"}}>
                                        <span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotco}</span>
                                    </p>
                                    : <div style={{height:"25px"}}></div>
                            }

                            <Input type="password" name="password" id="password"   value={this.state.password}
                                   onChange={this.passwordonChange}
                                   className="font-14 color-grey-9 loginInputzhuche"

                                   placeholder="密码"></Input>

                            <div className="left_right mt25 font-12 " style={{color: '#676767'}}>
                                <Checkbox onChange={this.onAutoLoginChange} checked={autoLogin}>下次自动登录</Checkbox>

                                <a onClick={()=>this.StudyMakeMoney()}
                                    className="mr3 color-grey-9 mt3 font-12">找回密码</a>
                            </div>

                            <Button className="login_btn font-16" type="primary" style={{height:"46px"}} onClick={() => this.postLogin()}
                                    size={"large"}>登录</Button>
                        </div>
                    }


                    {
                        parseInt(tab[0])==1 &&
                        <div style={{width: '340px'}}>
                            <Input  placeholder="请使用手机号/邮箱账号进行注册"
                                    className={Phonenumberisnotcos && Phonenumberisnotcos !== "" ?" color-grey-9 loginInputzhucheyslass bor-reds":" color-grey-9 loginInputzhuche"}
                                   value={this.state.logins}
                                   type="text" autoComplete="off"
                                   onChange={this.loginInputonChanges}
                                   style={{marginTop: '30px' , height: '38px',color:'#999999',fontSize:"14px"}}></Input>
                            {
                                Phonenumberisnotcos && Phonenumberisnotcos !== "" ?
                                    <p className="color-red  mt5 mb5  " style={{width: " 100%", height: "20px"}}>
                                        <span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcos}</span>
                                    </p>
                                    : <div style={{height:"25px"}}></div>

                            }
                            {
                                Whethertoverify===false?
                                  <DragValidator
                                    height={38}  successGreenColor="#29bd8b"
                                    style={{ height: '38px'}}
                                    dragOkCallback={this.dragOkCallback}
                                  ></DragValidator>
                                  :
                               ""

                            }
                            {
                                Whethertoverify===true?
                                <DragValidatortwo
                                  height={38}  successGreenColor="#29bd8b"
                                  style={{ height: '38px'}}
                                  dragOkCallback={this.dragOkCallback}
                                ></DragValidatortwo>
                                :
                                ""
                            }
                            {
                                Phonenumberisnotcosytdhk && Phonenumberisnotcosytdhk !== "" ?
                                  <p className="color-red  mt5 mb5  " style={{width: " 100%", height: "20px"}}>
                                      <span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcosytdhk}</span>
                                  </p>
                                  : <div style={{height:"25px"}}></div>

                            }


                            <div className="yslbutondls">

                                    <Input
                                      className={Phonenumberisnotcosyzm && Phonenumberisnotcosyzm !== "" ?" mr5 font-14 color-grey-9 loginInputzhucheyslass bor-reds":" mr5 font-14 color-grey-9 loginInputzhuche"}
                                      name="codes" type="text" autoComplete="off" readonly
                                      onfocus="this.removeAttribute('readonly')" style={{
                                        width:'210px',
                                        height:'38px',
                                    }} placeholder="请输入验证码"
                                      onChange={this.codesonChange}
                                      value={codes}
                                    >
                                    </Input>
                                    {
                                        getverificationcodes === undefined ?
                                          <Button className=" ml5 font-14" disabled style={{"width": "120px","text-align":"center", "height": "45px",}}
                                                  size={"large"}>重新发送{seconds}s</Button>
                                          : getverificationcodes === true ?
                                          <Button className=" ml5 font-14" type="primary" style={{"width": "120px","text-align":"center", "height": "45px",}}
                                                  onClick={() => this.getverificationcode()} size={"large"}>获取验证码</Button>
                                          :
                                          <Button className=" ml5 font-14 " type="primary" style={{"width": "120px","text-align":"center", "height": "45px",}}
                                                  onClick={() => this.getverificationcode()} size={"large"}>重新发送</Button>
                                    }

                                </div>
                            <div>
                                {
                                    Phonenumberisnotcosyzm && Phonenumberisnotcosyzm !== "" ?
                                      <p className="color-red  mt5 mb5  " style={{width: " 100%", height: "20px"}}>
                                          <span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcosyzm}</span>
                                      </p>
                                      : <div style={{height:"25px"}}></div>

                                }
                            </div>



                            <style>
                                {
                                    `
                                    .ant-input-affix-wrapper .ant-input-suffix {
                                        right: 12px;
                                        height: 20px;
                                    }
                                    `
                                }
                            </style>
                            <Input  placeholder="输入8~16位密码，区分大小写"
                                   type={classpassbool===false?"text":"password"}
                                   className={Phonenumberisnotcosymmm && Phonenumberisnotcosymmm !== "" ?"  font-14   color-grey-9 loginInputzhucheysl ":"  font-14   color-grey-9 loginInputzhuche"}
                                   autoComplete="new-password"
                                   onClick={this.changeType}
                                   value={this.state.passwords} onChange={this.passwordonChanges}
                                suffix={
                                <img className={"mt5"} src={passopens} onClick={(key) => this.Showandhide(key)}>
                                </img>
                            }></Input>
                            {
                                Phonenumberisnotcosymmm && Phonenumberisnotcosymmm !== "" ?
                                  <p className="color-red  mt5 mb5  " style={{width: " 100%", height: "20px"}}>
                                      <span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcosymmm}</span>
                                  </p>
                                  : <div style={{height:"25px"}}></div>

                            }
                            <Checkbox onChange={this.onChange}
                                      value={Agreetotheterms}
                            ><span className="font-14 "  style={{
                                color: '#676767',
                            }}>我已阅读并同意服务协议条款</span></Checkbox>
                            <Button className=" font-16" type="primary" style={{height:"46px", width: "100%",marginBottom:"26px"}} onClick={() => this.postregistered()}
                                    size={"large"}>注册</Button>


                        </div>
                    }
                </div>
            </div>
        );
    }
}

export default (LoginRegisterComponent);