import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["onSearch", "searchText", "autofocus", "placeholder", "onConfirm", "children", "iconSrc"];
import * as React from 'react';
import { useRef, useState } from 'react';
import searchIcon from "../../assets/icon/search/search.png";
import deleteIcon from "../../assets/icon/search/delete.png";
import { convertChildren } from "../../../src/utils/children-node-handle";
var SearchBar = function SearchBar(props) {
  var onSearch = props.onSearch,
    _props$searchText = props.searchText,
    searchText = _props$searchText === void 0 ? true : _props$searchText,
    _props$autofocus = props.autofocus,
    autofocus = _props$autofocus === void 0 ? false : _props$autofocus,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? '请输入' : _props$placeholder,
    onConfirm = props.onConfirm,
    children = props.children,
    iconSrc = props.iconSrc,
    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
  var _useState = useState(),
    searchValue = _useState[0],
    setSearchValue = _useState[1];
  var searchInput = useRef(null);
  var handleChange = function handleChange(e) {
    setSearchValue(e.target.value); // 更新 state
  };
  /**
   * 触发confirm事件
   */
  var confirm = function confirm() {
    var _searchInput$current;
    if (onConfirm) {
      onConfirm(searchValue);
    }
    searchInput === null || searchInput === void 0 ? void 0 : (_searchInput$current = searchInput.current) === null || _searchInput$current === void 0 ? void 0 : _searchInput$current.blur();
  };
  var handleKeyDown = function handleKeyDown(e) {
    if (e.key === 'Enter') {
      confirm();
    }
  };
  var clearValue = function clearValue() {
    setSearchValue('');
  };
  return /*#__PURE__*/React.createElement("form", _extends({
    action: "",
    className: "search-bar-form"
  }, otherProps, {
    onSubmit: confirm
  }), /*#__PURE__*/React.createElement("div", {
    className: "search-bar",
    onClick: onSearch
  }, /*#__PURE__*/React.createElement("span", {
    className: "search-bar-icon"
  }, /*#__PURE__*/React.createElement("img", {
    src: searchIcon,
    className: "search-bar-icon-img"
  })), /*#__PURE__*/React.createElement("input", {
    className: "search-bar-input",
    placeholder: placeholder,
    value: searchValue,
    autoFocus: autofocus,
    onChange: handleChange,
    onKeyDown: handleKeyDown,
    ref: searchInput
  }), searchValue ? /*#__PURE__*/React.createElement("img", {
    className: "search-bar-delete-img",
    src: deleteIcon,
    onClick: clearValue
  }) : '', searchText ? /*#__PURE__*/React.createElement("span", {
    className: "search-bar-enter",
    onClick: confirm
  }, "\u641C\u7D22") : '', iconSrc && convertChildren(children, 'img-right', {
    imgSrc: iconSrc,
    className: 'search-bar-right-icon'
  })));
};
export default SearchBar;