/**
*
* IKSearch
*
*/

import React, { PureComponent } from 'react';
import { Row, Col, Icon, From, Button, Input } from 'antd';

const InputGroup = Input.Group;


class IKSearch extends PureComponent { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    type: React.PropTypes.string,
    icon: React.PropTypes.string,
    className: React.PropTypes.string,
    onChange: React.PropTypes.func,
    onSearch: React.PropTypes.func,
    buttonEvent: React.PropTypes.func,
  };

  state = {
    value: this.props.value || '',
    noticeVisible: false,
    button: this.props.button? this.props.button || false,
  };

  constructor(props) {
    super(props);
  }

  handleInputChange(e) {
    if (e.target.value > 50) {
      if (!this.state.noticeVisible) {
        this.setState({ noticeVisible: true });
        errorNotice('字数不能超过50', () => {
          this.setState({ noticeVisible: false });
        });
      }
    } else {
      this.setState({value: e.target.value });
      this.props.onChange && this.props.onChange(e);
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ value: nextProps.vaule });
  }

  handleSearch() {
    this.props.onSearch && this.props.onSearch();
  }

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

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

    return(
      <div className="ik-search">
        <div className="ant-search-input-wrapper ik-width-percent-100">
          <Row>
            <Col span={`${this.props.button? '21': '24'}`}
              <Form>
                <InputGroup className="ant-search-input">
                  <Input
                    placeholder={this.props.placeholder}
                    size="large"
                    type="search"
                    value={this.state.value}
                    onChange={this.handleInputChange}
                    onPressEnter={this.handleSearch}
                    className="ik-padding-right-40"/>
                  <div className="ant-input-group-wrap">
                    <Button icon="search" className="ant-search-btn" onClick={this.handleSearch} />
                  </div>
                </InputGroup>
              </Form>
              {svgElm}
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}

export default IKSearch;
