import React from 'react';
import { Input, Icon } from 'antd';

import './index.less';

export default class Search extends React.Component {
  state = { val: '' };

  onChangeVal = e => {
    this.setState({ val: e.target.value });
    if (this.props.changeSearch) {
      this.props.changeSearch(e.target.value);
    }
  }

  onSearch = e => {
    if (this.props.onSearch) {
      this.props.onSearch(e.target.value);
    }
  }

  resetVal = () => {
    this.setState({ val: '' });
    if (this.props.onSearch) {
      this.props.onSearch('');
    }
  }

  render() {
    const suffix = this.state.val ? <Icon type="close-circle" className="search-close" onClick={this.resetVal} /> : null;
    return (
      <Input
        value={this.state.val}
        placeholder={this.props.placeholder}
        onChange={this.onChangeVal}
        onPressEnter={this.onSearch}
        className="input-search"
        prefix={<Icon type="search" style={{ color: 'rgba(0,0,0,.25)' }} />}
        suffix={suffix}
      />
    );
  }
}