import React, { Component } from 'react';
import { Redirect } from 'react-router';

import Dialog, {
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from 'material-ui/Dialog';
import {notification } from 'antd';

import axios from 'axios';

import './LoginDialog.css';
import { broadcastChannelPostMessage } from 'educoder'

const $ = window.$;
var wait = 60;
function time(btn){
  if (wait==0) {
      $(btn).addClass("btn_orange_bg");
      btn.removeAttribute("disabled");
      btn.innerHTML = "获取验证码";
      wait = 60;
      return;
  }else{
      $(btn).removeClass("btn_orange_bg");
      btn.setAttribute("disabled", "disabled");
      btn.innerHTML = wait + "s后重试";
      wait--;
  }
  setTimeout(function(){
      time(btn);
  },1000);
}
function get_login_verification_code(btn) {
  if($(btn).attr("disabled")) {
    return false;
  } else {
    if (/^1\d{10}$/.test($("#pass_name_input").val()) || /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test($("#pass_name_input").val())){
        if(!window.IsPC() || $('#quick-drag .drag_text').html() == "验证通过") {
            $("#passlogin_error_notice").hide();
            btn.setAttribute("disabled", "disabled");
            var val = '';
            var type = 6;
            if(/^1\d{10}$/.test($("#pass_name_input").val())){
                type = 6;
            } else if(/^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test($("#pass_name_input").val())){
                type = 7;
            }
            $.get(
                '/account/get_verification_code',
                { value: $('#pass_name_input').val().trim(),
                    type: type},
                function (data) {
                    if (data.status == "2") {
                        if(type == 6){
                            $("#pass_name_input").next().find("p").html("该手机号尚未注册，你可以<a href=\"/user_join?name=" + $("#pass_name_input").val() + "\" class=\"color-blue decoration\">去注册</a>").show();
                        } else{
                            $("#pass_name_input").next().find("p").html("该邮箱尚未绑定，你可以登录后去绑定").show();
                        }
                    } else {
                        $("#pass_name_input").next().find("p").hide();
                        if(type == 6){
                            $("#send_code_notice").html(data.msg).show();
                        } else{
                            var uurl = window.gotoEmail(data.link);
                            $("#send_code_notice").html("<font>验证码已经发送到您的邮箱，去<a href='http://" + uurl + "' id='validate_mail' style='color: #459be5; text-decoration: underline;' target='_blank'>查收</a></font>").show();
                        }
                        time(btn);
                    }
                });
        } else{
            $("#passlogin_error_notice").show();
        }
    }
  }
}


class LoginDialog extends Component {
    constructor(props) {
      super(props)
      this.state = {
        open: true,
        login:0,
        speedy:1,
        regular:0,
        loginValue:'',
        passValue:'',
        isGoing:true,
        isGoingValue:1,
        disabled:true,
        bottonclass:'log-botton mt5',
        dialogBox:'dialogBox',
        shortcutValue:'',
        shortcutnum:1,
        disabledType:true,
        gaincode:'gain-code',
        authCodeType:true,
        authCodeclass:'log-botton mt5',
        isRender: false,

      };
    }
    enter=(num) =>{
      this.setState({login:num,speedy:1,dialogBox:'dialogBox'});
     }

     register=(num) =>{
      this.setState({login:1,speedy:num,dialogBox:'dialogBox2'});
     }

     loginChange = () =>{
      let reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      let reg1 = /^1\d{10}$/;
      let reg2=/^[a-zA-z]\w{3,14}$/;
      //      let reg3=/^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
      let value=this.refs.loginPassText.value;
      let valuenum= value.length;
      if(valuenum>0){
          if(!reg.test(value)&&!reg1.test(value)&&!reg2.test(value)){
            this.setState({regular:1})
            return
        }else{
          this.setState({loginValue:value})
          this.setState({regular:0})
        }
      }else{
        this.setState({loginValue:value})
      }
     }

     passwordChange = () =>{
      let value =this.refs.passwordText.value;

      let valuenum= value.length;
      this.setState({disabled:false})
      this.setState({bottonclass:'log-botton mt5 edu-back-blue'})
      if(valuenum==0){
        this.setState({bottonclass:'log-botton mt5'})
        this.setState({disabled:true})
      }
      this.setState({passValue:value})
     }

     handleInputChange =(event)=> {
      const target = event.target;
      const value = target.type === 'checkbox' ? target.checked : target.value;
      const name = target.name;

      this.setState({[name]:value})

      if(value===true){
        this.setState({isGoingValue:1})
      }else{
        this.setState({isGoingValue:0})
      }

    }

    // 快捷注册
    shortcutIdChange=()=>{
      let reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      let reg1 = /^1\d{10}$/;
      let reg2=/^[a-zA-z]\w{3,14}$/;
      let value=this.refs.shortcutText.value;
      let valuenum= value.length;
      if(valuenum>0){
          if(!reg.test(value)&&!reg1.test(value)&&!reg2.test(value)){
            this.setState({shortcutnum:0})
            this.setState({disabledType:true})
            this.setState({gaincode : 'gain-code'})
            return
        }else{
          this.setState({gaincode : 'gain-code edu-back-blue'})
          this.setState({shortcutValue:value})
          this.setState({shortcutnum:1})
          this.setState({disabledType:false})
        }


      }else{
        this.setState({shortcutValue:value})

      }

    }
    authCodeChange=()=>{

      let value=this.refs.authCodeText.value;
      let valuenum= value.length;
        if(valuenum>3){
          this.setState({authCodeType:false})
          this.setState({authCodeclass:'log-botton mt5 edu-back-blue'})
        }else if(valuenum==0){
          this.setState({authCodeType:true})
          this.setState({authCodeclass:'log-botton mt5'})
        }
    }
    get_login_verification_code=()=>{
      get_login_verification_code($('#get_verification_code')[0])
    }
    dragWrapper=() =>{
      const $ = window.$
      $.fn.drag = function(options) {

        var x, drag = this, isMove = false, defaults = {
        };
        var options = $.extend(defaults, options);
        var handler = drag.find('.handler');
        var drag_bg = drag.find('.drag_bg');
        var text = drag.find('.drag_text');
        var maxWidth = 100
        //鼠标按下时候的x轴的位置
        handler.mousedown(function(e) {
            isMove = true;
            x = e.pageX - parseInt(handler.css('left'), 10);
            maxWidth = drag.width() - handler.width() - 2;  //能滑动的最大间距
        });
        $(document).mousemove(function(e) {
          var _x = e.pageX - x;// _x = e.pageX - (e.pageX - parseInt(handler.css('left'), 10)) = x
          if (isMove) {

              if (_x > 0 && _x <= maxWidth) {
                  handler.css({'left': _x});
                  drag_bg.css({'width': _x});
              } else if (_x > maxWidth) {  //鼠标指针移动距离达到最大时清空事件
                  dragOk();
              }
          }
            }).mouseup(function(e) {
                isMove = false;
                var _x = e.pageX - x;
                if (_x < maxWidth) { //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
                    handler.css({'left': 0});
                    drag_bg.css({'width': 0});
                }
            });

            //清空事件
            function dragOk() {
                handler.removeClass('handler_bg').addClass('handler_ok_bg');
                text.removeClass('slidetounlock').text('验证通过').css({'color':'#fff'});       //modify
            // drag.css({'color': '#fff !important'});

                handler.css({'left': maxWidth});                   // add
                drag_bg.css({'width': maxWidth});                  // add

                handler.unbind('mousedown');
                $(document).unbind('mousemove');
                $(document).unbind('mouseup');

            }
      }

      setTimeout(()=>{
        $('#quick-drag').drag();
      }, 4000)
    }

    componentWillReceiveProps(nextProps) {

            this.setState({
                isRender:nextProps.isRender
            })
      // console.log(nextProps.isRender);

    }

    componentDidMount() {

        if(this.props.isRender!=undefined){
            this.setState({
                isRender:this.props.isRender
            })
        }

      // $(document).on("showLoginDialog", (e, args)=>{
      //   this.setState({
      //     isRender: true
      //   })
      // })

      this.dragWrapper();

        axios.interceptors.response.use((response) => {
          if(response!=undefined)
            if (response&&response.data.status === 401) {
                this.setState({
                    isRender: true
                })
            }
            return response;
        }, (error) => {
        //     // if (error.response && error.response.data.error === '401 Unauthorized') {
        //     //   this.back_url = window.location.href;
        //     //   this.setState({
        //     //     isRender: true
        //     //   })
        //     //   // TODO 这里如果样式变了会出现css不加载的情况
        //     //   const $ = window.$;
        //     //   const isCssLoaded = window.getComputedStyle($('.log_nav li.active')[0], null)
        //     //       .getPropertyValue('border-bottom')
        //     //     == "2px solid rgb(69, 155, 229)"
        //     //   if (!isCssLoaded) {
        //     //     const isPort3007 = window.location.port == 3007;
        //     //     let _url_origin = isPort3007 ? 'http://localhost:3000' : ''
        //     //
        //     //     $('head').append( $('<link rel="stylesheet" type="text/css" />')
        //     //         .attr('href', `${_url_origin}/stylesheets/educoder/edu-main.css`) );
        //     //     $('head').append( $('<link rel="stylesheet" type="text/css" />')
        //     //         .attr('href', `${_url_origin}/stylesheets/educoder/edu-all.css`) );
        //     //   }
        //     // }
        //     // return Promise.reject(error);
        });
    }
    handleDialogClose = () => {
			// if(this.props.match===undefined){
			// 	window.location.href="/";
			// }else if(this.props.match.path==="/"){
      //   this.setState({
      //     isRender: false
      //   })
      // }else{
      // window.location.href="/";
      // }
			this.setState({
				isRender: false
			})
    }

    loginEDU=()=>{
      let {loginValue,passValue,regular,isGoingValue}=this.state;
      if(regular===1){
          return
      }
      let newloginValue=loginValue.replace(/(^\s*)|(\s*$)/g, "");
      let newpassValue=passValue.replace(/(^\s*)|(\s*$)/g, "");

      let url='/accounts/login.json'
        axios.post(url, {
            login:newloginValue,
            password:newpassValue,
            autologin:isGoingValue
            }
        ).then((response) => {
            if(response===undefined){
                return
            }

            if(response.status===200){
                if (response.data.status === 402) {
                    window.location.href = response.data.url;
                }else if (response.data.status === -2) {
									notification.open({
										message: '提示',
										description:response.data.message,
									});
								}else{
                  if(response.data.identity === null || response.data.identity === undefined){
                    this.props.history.push("/interesse");
                    return;
                  }
                    broadcastChannelPostMessage('refreshPage')
                    this.setState({
                        isRender:false
                    })
                    window.location.reload();
                }
            }

        }).catch((error) => {
          console.log("356");
            console.log(error)
        })
    }
    onKeydowns=(e)=>{
        let {disabled}=this.state;
        if( disabled===false&& e.keyCode === 13){
            this.loginEDU()
            console.log(1)
        }
    }
    render() {
      let{open,login,speedy,loginValue,regular,isGoing,isGoingValue,disabled,bottonclass,
        dialogBox,shortcutnum,disabledType,gaincode,authCodeType,authCodeclass, isRender}=this.state;

        if (isRender === undefined) {
            isRender = false
        }

    	return (
			<Dialog open={true} id="DialogID"
              style={{ display: isRender==false? 'none' : ''}}
							disableEscapeKeyDown={true}
              onClose={() => this.handleDialogClose()}
            >
				{isRender===true?
            <div className={dialogBox}>
                  <div id="closeIcon" onClick={()=>{this.handleDialogClose()}}>
                      <i className="iconfont icon-shanchudiao"></i>
                  </div>

                  <div id="log_reg_content">
                    <ul className="log_nav clearfix">
                      <li className={login==0?'active':''} onClick={()=>{this.enter(0)}}>登录</li>
                      {/*<li className={speedy==0?'active':''}  onClick={()=>{this.register(0)}}>快捷登录</li>*/}
                    </ul>


                      <div className="login-panel" id="login-panel-1" style={{display: login==0?'block':'none'}}>
                        <form acceptCharset="UTF-8" action="/login" id="main_login_form" method="post">

                          <div style={{"display":"inline","padding":"0","margin":"0"}}>
                          <input name="utf8" type="hidden" value="✓"></input>
                          <input name="authenticity_token" type="hidden" value="NVLiIlHZfhVBQtO9djnWncJqqdikNQIIxEmOvzK9vNM="></input>
                          </div>

                          <input name="back_url" type="hidden" value={this.back_url}></input>
                          <input
                          type="text"
                          className="input-100-45 mt20"
                          id="name_loggin_input"
                          ref="loginPassText"
                          onInput={this.loginChange}
                          name="username"
                          placeholder="请输入有效的手机号/邮箱号" ></input>

                          <div style={{height: '25px'}}><p className="color-orange edu-txt-left none" id="username_error_notice"
                            style={{display: regular==0?'none':'block'}}>请输入有效的手机号/邮箱号</p></div>

                          <div>
                            <input type="password" id="password_loggin_input"
                              name="password"
                              ref="passwordText"
                              onInput={this.passwordChange}
                              onKeyDown={this.onKeydowns}
                              className="input-100-45 mt5"
                              placeholder="密码" >
                            </input>
                            <div style={{height: '25px'}}>
                              <p className="color-orange edu-txt-left none" id="password_error_notice">
                                请输入密码
                              </p>
                            </div>
                          </div>


                          {/*<button className={bottonclass} id="psd_login_btn"  onClick={this.loginEDU} disabled={disabled}>*/}

                          {/*</button>*/}

                            <div className={disabled===false?"bluebutton  edu-back-blue":"bluebutton"}
                                 onClick={disabled===false?
                                   this.loginEDU: () => {}
                                   // console.log(1)
                                 }
                            >
                             登录
                            </div>

                          <p className="clearfix mt10">

                            <span className="fl">
                              <input type="checkbox"
                              className="mr5 magic-checkbox"
                              checked={isGoing}
                              onChange={this.handleInputChange}
                              value={isGoingValue}
                              name="isGoing"
                              id="p_autolog"></input>
                              <label htmlFor="p_autolog" style={{top:'0px'}}>下次自动登录</label>
                            </span>

                            <span className="fr">
                              <a href={"/changepassword"} className="mr3 color-grey-9">忘记密码</a><em className="vertical-line"></em>
                              <a href={"/register"} className="color-grey-9">注册</a>
                            </span>

                          </p>

                        </form>
                      </div>

                      {/*快捷登录*/}



                  </div>
                </div>
					:""}
            </Dialog>

    	);
    }

}

export default LoginDialog ;


// onkeypress="user_login_keypress(event);"

// onkeypress="user_login_keypress(event);"


{/* <div className="pr drag_certi_block width100 mt5">
  <div id="quick-drag" className="drag_slider" style={{color: 'rgb(255, 255, 255)'}}></div>
  <div className="new-login-error" style={{height: '25px'}}>
    <p id="passlogin_error_notice" className="color-orange edu-txt-left none" style={{display: 'block'}}></p>
  </div>
</div>}



{/*第三方账号登录*/}

{/* <div className="mt10 edu-txt-center">
  <p className="color-grey-9">第三方账号登录</p>
  <div className="mt15">
    <a href="javascript:void(0)" className="margin15"><img src="/images/educoder/weixin.png" className="radius"/></a>
    <a href="javascript:void(0)" className="margin15"><img src="/images/educoder/QQ.png" className="radius"/></a>
    <a href="javascript:void(0)" className="margin15"><img src="/images/educoder/weibo.png" className="radius"/></a>
  </div>
</div>}

//
// {/*<div className="login-panel none" id="login-panel-2" style={{display:speedy==0?'block':'none'}}>*/}
// {/*<form acceptCharset="UTF-8" action="/login" id="code_login_form" method="post">*/}
// {/*<div style={{"display":"inline","padding":"0","margin":"0"}}>*/}
// {/*<input name="utf8" type="hidden" value="✓"></input>*/}
// {/*<input name="authenticity_token" type="hidden" value="NVLiIlHZfhVBQtO9djnWncJqqdikNQIIxEmOvzK9vNM="></input>*/}
// {/*</div>*/}
// {/*<input name="back_url" type="hidden" value={this.back_url}></input>*/}
// {/*<input*/}
// {/*type="text"*/}
// {/*id="pass_name_input"*/}
// {/*name="username"*/}
// {/*ref="shortcutText"*/}
// {/*onInput={this.shortcutIdChange}*/}
// {/*className="input-100-45 mt20"*/}
// {/*placeholder="手机号/邮箱号">*/}
// {/*</input>*/}
// {/*<div style={{height: '25px'}}>*/}
// {/*<p className="color-orange edu-txt-left none" id="pass_name_error_notice"*/}
// {/*style={{display: shortcutnum==0?'block':'none'}}>请输入有效的手机号/邮箱号*/}
// {/*</p>*/}
// {/*</div>*/}
//
// {/*<div id="wrapper">*/}
// {/*/!*drag*/ }*/}
// {/*<div id="quick-drag" className="drag_slider">*/}
// {/*<div className="drag_bg"></div>*/}
// {/*<div className="drag_text slidetounlock">*/}
// {/*请按住滑块，拖动到最右边*/}
// {/*</div>*/}
// {/*<div className="handler handler_bg"></div>*/}
// {/*</div>*/}
// {/*<div className="new-login-error" style={{height: '25px'}}>*/}
// {/*<p id="passlogin_error_notice" className="color-orange edu-txt-left none">请先拖动滑块完成验证</p>*/}
// {/*</div>*/}
// {/*</div>*/}
//
// {/*<p className="clearfix mt5">*/}
// {/*<input*/}
// {/*type="text"*/}
// {/*name="code"*/}
// {/*id="login_verification_code"*/}
// {/*className="input-48-45 edu-txt-center fl"*/}
// {/*ref="authCodeText"*/}
// {/*onInput={this.authCodeChange}*/}
// {/*placeholder="请输入验证码">*/}
// {/*</input>*/}
// {/*<button className={gaincode} disabled={disabledType}*/}
// {/*onClick={()=>{this.get_login_verification_code()}} id="get_verification_code">获取验证码</button>*/}
// {/*</p>*/}
//
// {/*<div style={{height: '25px'}}>*/}
// {/*<p className="color-orange edu-txt-left none" id="send_code_notice">*/}
// {/*请输入验证码*/}
// {/*</p>*/}
// {/*</div>*/}
//
// {/*<button className={authCodeclass} disabled={authCodeType} id="code_login_btn">登录</button>*/}
//
// {/*<p className="clearfix mt10">*/}
//
// {/*<span className="fl">*/}
// {/*<input type="checkbox"*/}
// {/*className="mr5 magic-checkbox"*/}
// {/*id="autolog"*/}
// {/*checked={isGoing}*/}
// {/*onChange={this.handleInputChange}*/}
// {/*value={isGoingValue}*/}
// {/*name="isGoing"*/}
// {/*></input>*/}
// {/*<label htmlFor="autolog" style={{"top":"0px"}}>下次自动登录</label>*/}
// {/*</span>*/}
//
// {/*<span className="fr">*/}
// {/*<a href="https://www.educoder.net/account/lost_password" className="mr3 color-grey-9">忘记密码</a><em className="vertical-line"></em>*/}
// {/*<a href="https://www.educoder.net/user_join" target="_blank" className="color-grey-9">注册</a>*/}
// {/*</span>*/}
//
// {/*</p>*/}
// {/*</form>*/}
// {/*</div>*/}