import * as React from 'react';
import { PureComponent } from 'react';
import { Input, IInputChangeEvent } from 'zent';

export interface ISearchProps {
  prefixCls?: string;
  value?: any;
  placeholder?: string;
  keyword?: string;
  onChange(val: string): void;
  ready?: boolean;
}

class Search extends PureComponent<ISearchProps, any> {
  focused: boolean;
  inputRef = React.createRef<Input>();

  constructor(props: ISearchProps) {
    super(props);
    this.changeHandler = this.changeHandler.bind(this);
    this.focused = false;
  }

  componentDidUpdate() {
    if (!this.focused && this.props.ready) {
      setTimeout(() => {
        this.inputRef.current && this.inputRef.current.focus();
      }, 150);
      this.focused = true;
    }
  }

  changeHandler(ev: IInputChangeEvent) {
    this.props.onChange(ev.target.value);
  }

  render() {
    const { prefixCls, placeholder, keyword } = this.props;

    return (
      <Input
        type="text"
        ref={this.inputRef}
        placeholder={placeholder}
        className={`${prefixCls}-search`}
        value={keyword}
        onChange={this.changeHandler}
      />
    );
  }
}

export default Search;