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