import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { MdClose } from "react-icons/md";
import Button from "../Button";
const propTypes = {
  /**
   * Value of the input
   */
  value: PropTypes.string,
  /**
   * CSS class of the container (input+button).
   */
  className: PropTypes.string,
  /**
   * CSS class of the clear button .
   */
  classNameClearBt: PropTypes.string,
  /**
   * CSS class of the search button.
   */
  classNameSearchBt: PropTypes.string,
  /**
   * Placeholder of the input.
   */
  placeholder: PropTypes.string,
  /**
   * Function launched when the input has the focus.
   */
  onFocus: PropTypes.func,
  /**
   * Function launched when the input looses the focus.
   */
  onBlurInput: PropTypes.func,
  /**
   * Function triggered when the search button is clicked.
   * element.
   */
  onClickSearchButton: PropTypes.func,
  /**
   * Function launched when the user press a key on the input and the list.
   */
  onKeyPress: PropTypes.func,
  /**
   * Function launched when the user change the content of the input.
   */
  onChange: PropTypes.func,
  /**
   * Function launched when the user clear the content of the input.
   */
  onClearClick: PropTypes.func,
  /**
   * Content for submit button.
   */
  button: PropTypes.any,
  /**
   * Title for the clear button.
   */
  titleClearBt: PropTypes.string,
  /**
   * Title for the search button.
   */
  titleSearchBt: PropTypes.string,
  /**
   * Title for the input text.
   */
  titleSearchInput: PropTypes.string
};
const defaultProps = {
  button: "search",
  value: "",
  className: "tm-search-input",
  classNameClearBt: "tm-button tm-bt-clear",
  classNameSearchBt: "tm-button tm-bt-search",
  placeholder: "",
  titleClearBt: "",
  titleSearchBt: "",
  titleSearchInput: "",
  onFocus: () => {},
  onBlurInput: () => {},
  onClickSearchButton: () => {},
  onKeyPress: () => {},
  onChange: () => {},
  onClearClick: () => {}
};

/**
 * This component displays a search input
 */
class SearchInput extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      focus: false
    };
    this.refInput = null;
  }
  componentDidUpdate(prevProps, prevState) {
    const {
      focus
    } = this.state;
    if (this.refInput && focus && focus !== prevState.focus) {
      this.refInput.focus();
    }
  }
  onFocus(evt) {
    this.setState({
      focus: true
    });
    const {
      onFocus
    } = this.props;
    onFocus(evt);
  }
  onBlur(evt) {
    this.setState({
      focus: false
    });
    const {
      onBlurInput
    } = this.props;
    onBlurInput(evt.nativeEvent, this.lastKeyPress);
  }
  onKeyUp(evt) {
    if (evt.which === 13) {
      this.search(evt);
    }
    const {
      onKeyPress
    } = this.props;
    onKeyPress(evt);
    this.lastKeyPress = null;
  }
  onKeyDown(evt) {
    this.lastKeyPress = evt.nativeEvent;
  }

  /**
   * Trigger the onChange function with a new value or the current value of
   * the input.
   */
  search(evt, newVal) {
    const {
      value,
      onChange
    } = this.props;
    if (newVal !== undefined && newVal !== null) {
      onChange(evt, newVal);
    } else {
      onChange(evt, value);
    }
  }
  render() {
    const {
      button,
      className,
      classNameClearBt,
      classNameSearchBt,
      value,
      placeholder,
      titleClearBt,
      onClearClick,
      titleSearchBt,
      titleSearchInput,
      onClickSearchButton
    } = this.props;
    const {
      focus
    } = this.state;

    // Hide clear button
    const display = !value ? "none" : undefined;
    let newClassName = className || "";
    if (focus) {
      newClassName = "".concat(newClassName, " tm-focus");
    }
    return /*#__PURE__*/React.createElement("div", {
      className: newClassName
    }, /*#__PURE__*/React.createElement("input", {
      value: value,
      type: "text",
      tabIndex: "0",
      placeholder: placeholder,
      title: titleSearchInput,
      onChange: e => this.search(e, e.target.value),
      onBlur: e => this.onBlur(e),
      onFocus: e => this.onFocus(e),
      onKeyDown: e => this.onKeyDown(e),
      onKeyUp: e => this.onKeyUp(e),
      ref: node => {
        this.refInput = node;
      }
    }), /*#__PURE__*/React.createElement(Button, {
      className: classNameClearBt,
      title: titleClearBt,
      style: display && {
        display
      },
      onClick: e => {
        this.search(e, "");
        this.setState({
          focus: true
        });
        onClearClick();
      }
    }, /*#__PURE__*/React.createElement(MdClose, {
      focusable: false
    })), /*#__PURE__*/React.createElement(Button, {
      className: classNameSearchBt,
      title: titleSearchBt,
      onClick: e => onClickSearchButton(e)
    }, button));
  }
}
SearchInput.propTypes = propTypes;
SearchInput.defaultProps = defaultProps;
export default SearchInput;
//# sourceMappingURL=SearchInput.js.map