import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
// @ts-nocheck
import * as React from 'react';
import pickAttrs from '../../rc-util/pickAttrs';
import Input from './Input';
import { useRef, useState } from 'react';

var SingleSelector = function SingleSelector(props) {
  var inputElement = props.inputElement,
      prefixCls = props.prefixCls,
      id = props.id,
      inputRef = props.inputRef,
      disabled = props.disabled,
      autoFocus = props.autoFocus,
      autoComplete = props.autoComplete,
      accessibilityIndex = props.accessibilityIndex,
      mode = props.mode,
      open = props.open,
      values = props.values,
      placeholder = props.placeholder,
      tabIndex = props.tabIndex,
      showSearch = props.showSearch,
      searchValue = props.searchValue,
      activeValue = props.activeValue,
      maxLength = props.maxLength,
      style = props.style,
      onInputKeyDown = props.onInputKeyDown,
      onInputMouseDown = props.onInputMouseDown,
      onInputChange = props.onInputChange,
      onInputPaste = props.onInputPaste,
      onInputCompositionStart = props.onInputCompositionStart,
      onInputCompositionEnd = props.onInputCompositionEnd,
      setPrePadding = props.setPrePadding,
      setSufPadding = props.setSufPadding,
      prefix = props.prefix,
      suffix = props.suffix;

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      inputChanged = _React$useState2[0],
      setInputChanged = _React$useState2[1];

  var combobox = mode === 'combobox';
  var inputEditable = combobox || showSearch;
  var item = values[0];
  var inputValue = searchValue || '';

  if (combobox && activeValue && !inputChanged) {
    inputValue = activeValue;
  }

  React.useEffect(function () {
    if (combobox) {
      setInputChanged(false);
    }
  }, [combobox, activeValue]); // Not show text when closed expect combobox mode

  var hasTextInput = mode !== 'combobox' && !open ? false : !!inputValue;
  var title = item && (typeof item.label === 'string' || typeof item.label === 'number') ? item.label.toString() : undefined; // /* start */custom function ---by: szp

  var preDivEle = useRef();

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      prePaddingChild = _useState2[0],
      setPrePaddingChild = _useState2[1];

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      inputPaddingLeft = _useState4[0],
      setPreInputPaddingLeft = _useState4[1];

  React.useEffect(function () {
    var _preDivEle$current;

    setPrePaddingChild(preDivEle === null || preDivEle === void 0 ? void 0 : (_preDivEle$current = preDivEle.current) === null || _preDivEle$current === void 0 ? void 0 : _preDivEle$current.offsetWidth);
  });
  React.useEffect(function () {
    var _preDivEle$current2;

    prefix && setPreInputPaddingLeft((preDivEle === null || preDivEle === void 0 ? void 0 : (_preDivEle$current2 = preDivEle.current) === null || _preDivEle$current2 === void 0 ? void 0 : _preDivEle$current2.offsetWidth) + 8);
    prefix && setPrePadding(prePaddingChild + 20);
  }); // prefix && setPrePadding(prePaddingChild + 20);

  var sufDivEle = useRef();

  var _useState5 = useState(null),
      _useState6 = _slicedToArray(_useState5, 2),
      sufPaddingChild = _useState6[0],
      setSufPaddingChild = _useState6[1];

  var _useState7 = useState(null),
      _useState8 = _slicedToArray(_useState7, 2),
      inputPaddingRight = _useState8[0],
      setInputPaddingRight = _useState8[1];

  React.useEffect(function () {
    var _sufDivEle$current, _sufDivEle$current2;

    setSufPaddingChild(sufDivEle === null || sufDivEle === void 0 ? void 0 : (_sufDivEle$current = sufDivEle.current) === null || _sufDivEle$current === void 0 ? void 0 : _sufDivEle$current.offsetWidth);
    suffix && setInputPaddingRight((sufDivEle === null || sufDivEle === void 0 ? void 0 : (_sufDivEle$current2 = sufDivEle.current) === null || _sufDivEle$current2 === void 0 ? void 0 : _sufDivEle$current2.offsetWidth) + 12);
    suffix && setSufPadding(sufPaddingChild + 20);
  }); // suffix && setSufPadding(sufPaddingChild + 20);

  var customstylePre = {
    position: 'absolute'
  };
  var customstyleSuf = {
    position: 'absolute',
    right: 0
  };
  var inputStyle = {};
  if (prefix) inputStyle['paddingLeft'] = inputPaddingLeft;
  if (suffix) inputStyle['paddingRight'] = inputPaddingRight;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-selection-search")
  }, /*#__PURE__*/React.createElement("span", {
    ref: preDivEle,
    style: customstylePre
  }, prefix && "".concat(prefix, "\uFF1A")), /*#__PURE__*/React.createElement(Input, {
    style: inputStyle,
    ref: inputRef,
    prefixCls: prefixCls,
    id: id,
    open: open,
    inputElement: inputElement,
    disabled: disabled,
    autoFocus: autoFocus,
    autoComplete: autoComplete,
    editable: inputEditable,
    accessibilityIndex: accessibilityIndex,
    value: inputValue,
    onKeyDown: onInputKeyDown,
    onMouseDown: onInputMouseDown,
    onChange: function onChange(e) {
      setInputChanged(true);
      onInputChange(e);
    },
    onPaste: onInputPaste,
    onCompositionStart: onInputCompositionStart,
    onCompositionEnd: onInputCompositionEnd,
    tabIndex: tabIndex,
    attrs: pickAttrs(props, true),
    maxLength: combobox ? maxLength : undefined
  }), /*#__PURE__*/React.createElement("span", {
    ref: sufDivEle,
    style: customstyleSuf
  }, suffix)), !combobox && item && !hasTextInput && /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-selection-item"),
    title: title
  }, item.label), !item && !hasTextInput && /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-selection-placeholder")
  }, placeholder));
};

export default SingleSelector;