import * as React from 'react';
import Icon from '../icon';
function noop() {
}

export interface SearchProps {
  prefixCls?: string;
  placeholder?: string;
  onChange?: (e: React.FormEvent) => void;
  handleClear?: (e: React.MouseEvent) => void;
  value?: any;
}

export default class Search extends React.Component<SearchProps, any> {
  static defaultProps = {
    placeholder: '',
    onChange: noop,
    handleClear: noop,
  };

  handleChange = (e) => {
    this.props.onChange(e);
  }

  handleClear = (e) => {
    e.preventDefault();
    this.props.handleClear(e);
  }

  render() {
    const { placeholder, value, prefixCls } = this.props;
    return (
      <div>
        <input placeholder={placeholder} className={`${prefixCls} ant-input`} value={value} ref="input"
          onChange={this.handleChange}
        />
        {value && value.length > 0 ?
          <a href="#" className={`${prefixCls}-action`} onClick={this.handleClear}>
            <Icon type="cross-circle" />
          </a>
          : <span className={`${prefixCls}-action`}><Icon type="search" /></span>
        }
      </div>
    );
  }
}