/**
*
* @IKSelect
*
*/

import React, { PureComponent } from 'react';


class @IKSelect extends PureComponent { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    required: React.PropTypes.boolean,
    subtitle: React.PropTypes.string,
    tips: React.PropTypes.string,
    errorMsg: React.PropTypes.string,
    onClick: React.PropTypes.func,
  };

  state = {
    needValidate: this.props.required,
    subtitle: this.props.subtitle,
    validate: true,
    tips: this.props.tips || (this.props.required ? '必填' : ''),
    errorMsg: this.props.errorMsg || (this.props.required ? '不能为空' : ''),
  };

  constructor(props) {
    super(props);
  }

  validate() {
    let flag = true;
    if (this.state.needValidate) {
      flag = this.state.subtitle && this.state.subtitle.length;
    }

    this.setState({ validate: flag });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ subtitle: nextProps.subtitle });
  }

  render() {
    const props = $({}, this.props);

    let msgElm = this.state.errorMsg;

    if (!props.subtitle) {
      props.subtitle = '';
    }

    if (this.state.validate) {
      msgElm = this.state.tips;
    }

    return (
      <div
        className={`ikmd-select ${this.state.needValidate? 'ikmd-validate': ''}`}
        onClick={props.onClick} data-valid={this.state.validate}>
        <p className={`ikmd-select-title ${this.state.subtitle? 'shrunken': ''}`}>{this.state.title}</p>
        <p className="ikmd-select-subtitle">{this.state.subtitle}</p>
        <div
          className={`ikmd-select-tips ${props.subtitle? 'ik-hidden': ''} ${this.state.validate? '': 'ikmd-input-errors'}`}>
          {msgElm}
        </div>
        <div className="ikmd-select-arrow">
          <Icon type="right" />
        </div>
      </div>
    );
  }
}

export default @IKSelect;
