/**
*
* IKInput
*
*/

import React, { PureComponent } from 'react';


class IKInput extends PureComponent { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    required: React.PropTypes.boolean,
    number: React.PropTypes.string,
    mobile: React.PropTypes.string,
    phone: React.PropTypes.string,
    value: React.PropTypes.string,
    inputType: React.PropTypes.string,
    tips: React.PropTypes.string,
    errorMsg: React.PropTypes.string,
    percent: React.PropTypes.boolean,
    decimal: React.PropTypes.number,
    allowEmoji: React.PropTypes.boolean,
    button, React.PropTypes.boolean,
    buttonEvent: React.PropTypes.func,
    onClick: React.PropTypes.func,
    onKeydown: React.PropTypes.func,
    onPressEnter: React.PropTypes.func,
    onKeyUp: React.PropTypes.func,
    onChange: React.PropTypes.func,
    onBlur: React.PropTypes.func,
  };

  state = {
    needValidate: validateReg? || this.props.required
    validateReg: validateReg
    focus: if isPresent(@props.value) then true else false
    error: false
    inputType: this.props.inputType || 'text'
    tips: this.props.tips || tips
    errorMsg: this.props.errorMsg || errorMsg
    button: if isPresent(@props.button) then @props.button else false
    allowEmoji: this.props.allowEmoji || false
  };

  constructor(props) {
    super(props);

    [validateReg, tips, errorMsg] = this.getValidateInfo();

    this.setState {
      needValidate: validateReg || this.props.required
      validateReg: validateReg
      focus: this.props.value ? true : false,
      error: false
      inputType: this.props.inputType || 'text'
      tips: this.props.tips || tips
      errorMsg: this.props.errorMsg || errorMsg
      button: this.props.button ? this.props.button : false,
      allowEmoji: this.props.allowEmoji || false
    };
  }

  getValidateInfo() {
    let tips = '';
    let validateReg = '';
    let errorMsg = '不能为空';

    if (this.props.required) {
      tips = '必填';
    }

    if (this.props.number) {
      validateReg = /(^\s+$|^\d+[\.]?$|^\d+\.\d+$)|(^[\s]*$)/;
      tips = '';
      errorMsg = '必须为数字';
    } else if (this.props.mobile) {
      validateReg = /(^1[3|4|5|7|8][0-9]\d{8}$)|(^[\s]*$)/;
      tips = '请填写手机号';
      errorMsg = '格式不正确';
    } else if (this.props.phone) {
      validateReg = /(^[/\*\+\.\-\,\\(\)\s\d]+$)|(^[\s]*$)/;
      tips = '请填写电话';
      errorMsg = '格式不正确';
    } else {
      validateReg = this.props.validateReg;
    }

    return [validateReg, tips, errorMsg];
  }

  handleClick() {
    this.refs.input.focus();
  }

  handleInput(e) {
    let reg = null;
    if (this.props.percent) {
      reg = /^\d{1,2}[\.]?$|^\d{1,2}\.\d{1,2}$|^100$|^100[\.]?$|^100\.[0]{1,2}$/
    } else if (this.props.decimal) {
      const decimal = Number(this.props.decimal);

      if (decimal === 0) {
        reg = /^\d+$/;
      } else {
        reg = new RegExp(`^\\d+[\\.]?$|^\\d+\\.\\d{1,${decimal}}$`);
      }
    }

    if (reg) {
      if (value || reg.test(value)) {
        this.props.onChange(value);
      }
    } else {
      this.props.onChange(e);
    }
  }

  handleKeyUp(e) {
    if (this.props.onKeyUp) {
      this.props.onKeyUp(e);
    }
  }

  handleKeyDown(e) {
    if (e.keyCode === 13 && this.props.onPressEnter) {
      this.onPressEnter(e);
    }

    if (this.props.onKeyDown) {
      this.onKeyDown(e);
    }
  }

  handleFocus() {
    this.setState({ focus: true });
  }

  handleBlur(e) {
    if (this.props.onBlur) {
      this.props.onBlur(e);
    }

    if (typeof(this.state.inputType) !== 'number' && !this.props.value) {
      this.setState({ focus: false });
    }
  }

  validate(callback) {
    let error = false;

    if (!this.state.allowEmoji) {
      error = /[^\s]*[\uE000-\uF8FF]|\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDDFF][^\s]*/.test(this.props.value);
      this.setState({
        error: error,
        errorMsg: '不允许输入表情'
      }, () => {
        callback && callback();
      });
    }

    if (!error) {
      const errorMsg = this.getValidateInfo()[2];

      if (this.props.value === '' && this.props.required) {
        error = true;
      } else if (this.state.validateReg) {
        error = this.state.validateReg.test(this.props.value);
      } else {
        error = false;
      }

      this.setState({
        errorMsg: errorMsg,
        error: error;
      }, () => {
        callback && callback();
      })
    }
  }

  componentWillReceiveProps(nextProps) {
    const state = {
      value: nextProps.value;
    };

    if (nextProps.value) {
      state.focus = true;
    }

    this.setState(state);
  }

  render() {
    const props = $({}, this.props);
    let inputElm = null;
    let svgElm = null;

    props.type = props.type || 'input';

    if (props.value) {
      delete props.defaultValue;
    }  else {
      props.value = '';
    }

    if (props.button) {
      props.style = { width : '80%' };
    }

    if (props.type === 'input') {
      inputElm = (
        <input
          {...props}
          ref="input"
          type= {props.inputType}
          onKeyDown={this.handleKeyDown}
          onChange={this.handleInput}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}/>
      );
    } else {
      inputElm = (
        <textarea
          {...props}
          ref="input"
          onKeyUp={this.handleKeyUp}
          onKeyDown={this.handleKeyDown}
          onChange={this.handleInput}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}/>
      );
    }

    if (props.button) {
      svgElm = (
        <svg>
          <use xlinkHref={props.button} onClick={props.buttonEvent} />
        </svg>
      );
    }

    return (
      <div class="ikmd-input" onClick={this.props.onClick} 'data-valid'= {!this.state.error}
        <label className="" onClick={this.handleClick}>{props.label} </label>
        {inputElm}
        {svgElm}
        <p className="ikmd-input-tips">{this.state.tips}</p>
        <p className="ikmd-input-errors">{this.state.errorMsg}</p>
      </div>
    );
  }
}

export default IKInput;
