import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { TextField } from '../TextField/index.js';
import { Button } from '../Button/index.js';
import SearchIcon from '@iam-com/icons/Search';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../_verture/typeof-498dd2b1.js';
import '../_verture/tslib.es6-55ed4bd2.js';
import '../Label/index.js';
import '../Help/index.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import 'clsx';
import '@iam-com/icons/Help';
import '@iam-com/lib';
import '@iam-com/icons/PreviewClose';
import '@iam-com/icons/PreviewOpen';
import '@iam-com/icons/CloseCircle';
import '../AutoTips/index.js';
import '../Loading/index.js';
import '@iam-com/icons/LoadingF';
import '../HelperText/index.js';
import '../_verture/useGlobalProps-1b846a65.js';
import '@para-ui/core/GlobalContext';
import '../_verture/index-fac03ce3.js';
import 'rc-dropdown';
import '../_verture/usePopupContainer-87febeb9.js';
import 'dayjs';
import '@iam-com/icons/Forbid';
import '@iam-com/icons/Down';
import '../_verture/useFormatMessage-703f8b20.js';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-search {\n  display: flex;\n  width: 100%;\n}\n.paraui-v3-search > .search-text-field {\n  padding: 0;\n}\n.paraui-v3-search > .search-text-field > .text-field-content > .text-field-content-within > .right-icon {\n  display: none;\n  margin-right: 8px;\n}\n.paraui-v3-search > .search-text-field > .text-field-content > .text-field-content-within > .right-icon > svg {\n  font-size: 16px;\n}\n.paraui-v3-search > .search-text-field > .text-field-content > .text-field-content-within > .right-icon:hover > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-search > .search-text-field > .text-field-content > .text-field-content-within > .clean-up-icon {\n  margin-right: 8px;\n}\n.paraui-v3-search > .search-text-field > .text-field-content > .text-field-content-after {\n  padding: 0;\n  background-color: white;\n}\n.paraui-v3-search > .search-text-field > .text-field-content > .text-field-content-after .search-button {\n  border: 0;\n}\n.paraui-v3-search.paraui-v3-search-right-icon-exist > .search-text-field > .text-field-content > .text-field-content-within > .right-icon {\n  display: flex;\n}\n.paraui-v3-search.paraui-v3-search-value > .search-text-field > .text-field-content > .text-field-content-within > .right-icon {\n  display: flex;\n}\n.paraui-v3-search .search-button > .paraui-v3-button-icon {\n  margin-right: 0;\n}\n.paraui-v3-search .search-button > .paraui-v3-button-icon > svg {\n  font-size: 16px;\n}\n.paraui-v3-search .search-button > .paraui-v3-button-label {\n  margin-left: 4px;\n}\n.paraui-v3-search.paraui-v3-search-outside > .search-button {\n  margin-left: 16px;\n}\n.paraui-v3-search.paraui-v3-search-inside .search-button {\n  padding: 0 8px;\n}\n.paraui-v3-search.paraui-v3-search-inside .search-button svg {\n  font-size: 20px;\n}\n.paraui-v3-search.paraui-v3-search-inside.paraui-v3-search-no-btntext .search-button > span {\n  margin-right: 0;\n}\n.paraui-v3-search.paraui-v3-search-btntext .search-button svg {\n  font-size: 16px;\n}\n.paraui-v3-search.paraui-v3-search-small > .search-text-field > .text-field-content > .text-field-content-after .search-button {\n  height: 26px;\n}\n.paraui-v3-search.paraui-v3-search-small.paraui-v3-search-inside.paraui-v3-search-no-btntext .search-button svg {\n  font-size: 16px;\n}\n.paraui-v3-search.paraui-v3-search-small.paraui-v3-search-right-icon-exist > .search-text-field > .text-field-content > .text-field-content-within > .right-icon > svg {\n  font-size: 16px;\n}\n.paraui-v3-search.paraui-v3-search-small.paraui-v3-search-right-icon-exist > .search-text-field > .text-field-content > .text-field-content-within > .clean-up-icon {\n  margin-right: 4px;\n}\n.paraui-v3-search.paraui-v3-search-medium > .search-text-field > .text-field-content > .text-field-content-after .search-button {\n  height: 30px;\n}\n.paraui-v3-search.paraui-v3-search-medium.paraui-v3-search-inside.search-no-btntext .search-button svg {\n  font-size: 18px;\n}\n.paraui-v3-search.paraui-v3-search-medium.paraui-v3-search-right-icon-exist > .search-text-field > .text-field-content > .text-field-content-within > .right-icon > svg {\n  font-size: 18px;\n}\n.paraui-v3-search.paraui-v3-search-medium.paraui-v3-search-right-icon-exist > .search-text-field > .text-field-content > .text-field-content-within > .clean-up-icon {\n  margin-right: 6px;\n}\n.paraui-v3-search.paraui-v3-search-large > .search-text-field > .text-field-content > .text-field-content-after .search-button {\n  height: 34px;\n}\n.paraui-v3-search.paraui-v3-search-large.paraui-v3-search-inside.search-no-btntext .search-button svg {\n  font-size: 20px;\n}\n.paraui-v3-search.paraui-v3-search-large.paraui-v3-search-right-icon-exist > .search-text-field > .text-field-content > .text-field-content-within > .right-icon > svg {\n  font-size: 20px;\n}\n.paraui-v3-search.paraui-v3-search-large.paraui-v3-search-right-icon-exist > .search-text-field > .text-field-content > .text-field-content-within > .clean-up-icon {\n  margin-right: 8px;\n}";
styleInject(css_248z);

var Search = function Search(props) {
  var _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    style = props.style,
    _props$size = props.size,
    size = _props$size === void 0 ? 'large' : _props$size,
    _props$btnType = props.btnType,
    btnType = _props$btnType === void 0 ? 'outside' : _props$btnType,
    _props$showBtn = props.showBtn,
    showBtn = _props$showBtn === void 0 ? true : _props$showBtn,
    btnIcon = props.btnIcon,
    _props$btnText = props.btnText,
    btnText = _props$btnText === void 0 ? '' : _props$btnText,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder;
    props.defaultValue;
    var value = props.value,
    rightIcon = props.rightIcon,
    _props$showRightIcon = props.showRightIcon,
    showRightIcon = _props$showRightIcon === void 0 ? true : _props$showRightIcon,
    _props$allowClear = props.allowClear,
    allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
    _props$rightIconExist = props.rightIconExist,
    rightIconExist = _props$rightIconExist === void 0 ? false : _props$rightIconExist,
    onChange = props.onChange,
    onBlur = props.onBlur,
    onFocus = props.onFocus,
    onKeydown = props.onKeydown,
    onKeyUp = props.onKeyUp,
    onClickBtn = props.onClickBtn,
    onClickRightIcon = props.onClickRightIcon,
    onEnter = props.onEnter,
    onClear = props.onClear,
    otherProps = props.otherProps;
  var _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    valueCom = _useState2[0],
    setValueCom = _useState2[1];
  useEffect(function () {
    if (props.defaultValue !== undefined) {
      setValueCom(props.defaultValue);
    }
  }, []);
  // 监听value
  useEffect(function () {
    if (value !== undefined) {
      setValueCom(value);
    }
  }, [value]);
  /**
   * 输入框右侧按钮
   * @return {ReactNode}
   */
  var clearIcon = function clearIcon() {
    if (!showRightIcon) return '';
    if (rightIcon) return rightIcon;
  };
  /**
   * 搜索按钮图标
   * @return {ReactNode}
   */
  var searchBtnIcon = function searchBtnIcon() {
    if (btnIcon) return btnIcon;
    return jsx(SearchIcon, {});
  };
  /**
   * 点击输入框右侧按钮
   */
  var clickRightIcon = function clickRightIcon() {
    var val = valueCom;
    // 显示右侧图标 且 没有自定义右侧图标 为清空按钮
    if (showRightIcon && !rightIcon) {
      if (props.value === undefined) {
        val = '';
        setValueCom('');
      }
    }
    onClickRightIcon && onClickRightIcon(val);
  };
  /**
   * 改变输入框
   * @param event {React.ChangeEvent<HTMLInputElement>} 元素
   */
  var changeInput = function changeInput(event) {
    var val = event.target.value;
    if (props.value === undefined) {
      setValueCom(val);
    }
    onChange && onChange(val, event);
  };
  /**
   * 点击按钮
   */
  var clickBtn = function clickBtn() {
    onClickBtn && onClickBtn(valueCom);
  };
  /**
   * 内置按钮
   * */
  var buttonDom = function buttonDom() {
    if (showBtn && btnType === 'inside') {
      return jsx(Button, Object.assign({
        className: 'search-button',
        size: size,
        startIcon: searchBtnIcon(),
        variant: 'outlined',
        onClick: clickBtn
      }, {
        children: btnText
      }));
    }
    return undefined;
  };
  /**
   * 处理class
   * @return {string}
   */
  var handClass = function handClass() {
    var str = "".concat($prefixCls, "-search");
    if (className) str += ' ' + className;
    if (size) str += " ".concat($prefixCls, "-search-").concat(size);
    if (btnType) str += " ".concat($prefixCls, "-search-").concat(btnType);
    if (showBtn) str += " ".concat($prefixCls, "-search-showbtn");
    if (btnText) str += " ".concat($prefixCls, "-search-btntext");else str += " ".concat($prefixCls, "-search-no-btntext");
    if (valueCom) str += " ".concat($prefixCls, "-search-value");
    if (rightIconExist) str += " ".concat($prefixCls, "-search-right-icon-exist");
    return str;
  };
  var handValue = function handValue() {
    if (props.value === undefined) {
      return valueCom;
    }
    return value;
  };
  return jsxs("div", Object.assign({
    className: handClass(),
    style: style
  }, {
    children: [jsx(TextField, Object.assign({
      className: "search-text-field",
      size: size,
      placeholder: placeholder,
      value: handValue(),
      rightIcon: clearIcon(),
      hideErrorDom: true,
      onClickIcon: clickRightIcon,
      onChange: changeInput,
      onBlur: onBlur,
      onFocus: onFocus,
      onKeydown: onKeydown,
      onKeyUp: onKeyUp,
      onEnter: onEnter,
      autoComplete: "new-password",
      addonAfter: buttonDom(),
      allowClear: allowClear,
      onClear: onClear
    }, otherProps)), showBtn && btnType === 'outside' && jsx(Button, Object.assign({
      className: 'search-button',
      size: size,
      startIcon: searchBtnIcon(),
      variant: 'contained',
      onClick: clickBtn
    }, {
      children: btnText
    }))]
  }));
};

export { Search, Search as default };
