"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "SearchBar", {
    enumerable: true,
    get: function() {
        return SearchBar;
    }
});
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _iconsreact = require("@nutui/icons-react");
var _configprovider = require("../configprovider");
var _typings = require("../../utils/typings");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    placeholder: '',
    shape: 'square',
    disabled: false,
    maxLength: 9999,
    clearable: true,
    readOnly: false,
    autoFocus: false,
    backable: false,
    left: '',
    right: '',
    rightIn: '',
    leftIn: /*#__PURE__*/ _react.default.createElement(_iconsreact.Search, {
        width: "16",
        height: "16"
    })
});
var SearchBar = function SearchBar(props) {
    var classPrefix = 'nut-searchbar';
    var locale = (0, _configprovider.useConfig)().locale;
    var searchRef = (0, _react.useRef)(null);
    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), outerValue = _$_object_spread.value, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick;
    var _useState = (0, _sliced_to_array._)((0, _react.useState)(function() {
        return outerValue;
    }), 2), value = _useState[0], setValue = _useState[1];
    var forceFocus = function forceFocus() {
        var searchSelf = searchRef.current;
        searchSelf && searchSelf.focus();
    };
    var change = function change(event) {
        var value = event.target.value;
        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(value, event));
        setValue(value);
    };
    var focus = function focus(event) {
        var value = event.target.value;
        onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
    };
    var blur = function blur(event) {
        var searchSelf = searchRef.current;
        searchSelf && searchSelf.blur();
        var value = event.target.value;
        onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, event));
    };
    (0, _react.useEffect)(function() {
        setValue(outerValue);
    }, [
        outerValue
    ]);
    (0, _react.useEffect)(function() {
        autoFocus && forceFocus();
    }, [
        autoFocus
    ]);
    var renderField = function renderField() {
        return /*#__PURE__*/ _react.default.createElement("input", {
            className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
            ref: searchRef,
            style: style,
            value: value || '',
            placeholder: placeholder || locale.placeholder,
            disabled: disabled,
            readOnly: readOnly,
            maxLength: maxLength,
            onKeyDown: onKeydown,
            onChange: function onChange(e) {
                return change(e);
            },
            onFocus: function onFocus(e) {
                return focus(e);
            },
            onBlur: function onBlur(e) {
                return blur(e);
            },
            onClick: function onClick(e) {
                return clickInput(e);
            }
        });
    };
    var clickInput = function clickInput(e) {
        onInputClick && onInputClick(e);
    };
    var renderLeftIn = function renderLeftIn() {
        if (!leftIn) return null;
        return /*#__PURE__*/ _react.default.createElement("div", {
            className: "".concat(classPrefix, "-leftin ").concat(classPrefix, "-icon")
        }, leftIn);
    };
    var renderLeft = function renderLeft() {
        if (!backable && !left) return null;
        return /*#__PURE__*/ _react.default.createElement("div", {
            className: "".concat(classPrefix, "-left")
        }, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreact.ArrowLeft, {
            width: "16",
            height: "16"
        }) : left);
    };
    var renderRightIn = function renderRightIn() {
        if (!rightIn) return null;
        return /*#__PURE__*/ _react.default.createElement("div", {
            className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
        }, rightIn);
    };
    var renderRight = function renderRight() {
        if (!right) return null;
        return /*#__PURE__*/ _react.default.createElement("div", {
            className: "".concat(classPrefix, "-right")
        }, right);
    };
    var handleClear = function handleClear() {
        return /*#__PURE__*/ _react.default.createElement("div", {
            className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
            onClick: function onClick(e) {
                return clearaVal(e);
            }
        }, /*#__PURE__*/ _react.default.createElement(_iconsreact.MaskClose, null));
    };
    var clearaVal = function clearaVal(event) {
        if (disabled || readOnly) {
            return;
        }
        setValue('');
        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
        onClear && onClear(event);
        forceFocus();
    };
    var onKeydown = function onKeydown(e) {
        if (e.key === 'Enter') {
            var event = e.nativeEvent;
            if (typeof event.cancelable !== 'boolean' || event.cancelable) {
                event.preventDefault();
            }
            onSearch && onSearch(value);
        }
    };
    return /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', "  ").concat(className || ''),
        style: style
    }, renderLeft(), /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-content ").concat(shape === 'round' ? "".concat(classPrefix, "-round") : '')
    }, renderLeftIn(), renderField(), clearable && !value && renderRightIn(), clearable && value && handleClear()), renderRight());
};
SearchBar.displayName = 'NutSearchBar';
