import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useCallback, useRef, forwardRef, useImperativeHandle, useState } from "react";
import { MaskClose } from "@nutui/icons-react";
import { formatNumber } from "./utils";
import { useConfig, useRtl } from "../configprovider";
import { ComponentDefaults } from "../../utils/typings";
import { usePropsValue } from "../../hooks/use-props-value";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    type: 'text',
    name: '',
    placeholder: undefined,
    confirmType: 'done',
    align: 'left',
    required: false,
    disabled: false,
    readOnly: false,
    maxLength: 9999,
    clearable: false,
    clearIcon: null,
    formatTrigger: 'onChange',
    autoFocus: false,
    plain: false
});
export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
    var rtl = useRtl();
    var locale = useConfig().locale;
    var _ref = _object_spread({}, defaultProps, props), type = _ref.type, name = _ref.name, placeholder = _ref.placeholder, align = _ref.align, disabled = _ref.disabled, readOnly = _ref.readOnly, maxLength = _ref.maxLength, clearable = _ref.clearable, clearIcon = _ref.clearIcon, formatTrigger = _ref.formatTrigger, autoFocus = _ref.autoFocus, style = _ref.style, className = _ref.className, onChange = _ref.onChange, onFocus = _ref.onFocus, onClear = _ref.onClear, formatter = _ref.formatter, onClick = _ref.onClick, confirmType = _ref.confirmType, plain = _ref.plain, defaultValue = _ref.defaultValue, _value = _ref.value, onCompositionStart = _ref.onCompositionStart, onCompositionEnd = _ref.onCompositionEnd, rest = _object_without_properties(_ref, [
        "type",
        "name",
        "placeholder",
        "align",
        "disabled",
        "readOnly",
        "maxLength",
        "clearable",
        "clearIcon",
        "formatTrigger",
        "autoFocus",
        "style",
        "className",
        "onChange",
        "onFocus",
        "onClear",
        "formatter",
        "onClick",
        "confirmType",
        "plain",
        "defaultValue",
        "value",
        "onCompositionStart",
        "onCompositionEnd"
    ]);
    var _usePropsValue = _sliced_to_array(usePropsValue({
        value: _value,
        defaultValue: defaultValue,
        finalValue: '',
        onChange: onChange
    }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
    var inputRef = useRef(null);
    var composingRef = useRef(false);
    var _useState = _sliced_to_array(useState(false), 2), active = _useState[0], setActive = _useState[1];
    useImperativeHandle(ref, function() {
        return {
            clear: function() {
                setValue('');
            },
            focus: function() {
                var _inputRef_current;
                (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
            },
            blur: function() {
                var _inputRef_current;
                (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
            },
            get nativeElement () {
                return inputRef.current;
            }
        };
    });
    var inputClass = useCallback(function() {
        var classPrefix = 'nut-input';
        return [
            classPrefix,
            disabled ? "".concat(classPrefix, "-disabled") : '',
            readOnly ? "".concat(classPrefix, "-readonly") : '',
            plain ? "".concat(classPrefix, "-plain") : "".concat(classPrefix, "-container")
        ].filter(Boolean).join(' ');
    }, [
        disabled
    ]);
    var updateValue = function(value) {
        var trigger = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'onChange';
        var val = value;
        if (type === 'number') {
            val = formatNumber(val, false, true);
        }
        if (type === 'digit') {
            val = formatNumber(val, true, true);
        }
        if (formatter && trigger === formatTrigger) {
            val = formatter(val);
        }
        setValue(val);
        var eventHandler = props[trigger];
        if (eventHandler && typeof eventHandler === 'function' && trigger !== 'onChange') {
            eventHandler(val);
        }
    };
    var handleFocus = function(event) {
        var val = event.target.value;
        onFocus && onFocus(val);
        setActive(true);
    };
    var handleInput = function(value) {
        updateValue(value, 'onChange');
    };
    var handleBlur = function(event) {
        var val = event.target.value;
        updateValue(val, 'onBlur');
        setTimeout(function() {
            setActive(false);
        }, 200);
    };
    var inputType = function(type) {
        if (type === 'digit') {
            return 'text';
        }
        if (type === 'number') {
            return 'tel';
        }
        return type;
    };
    return /*#__PURE__*/ React.createElement("div", {
        className: "".concat(inputClass(), "  ").concat(className || ''),
        style: style,
        onClick: function(e) {
            onClick && onClick(e);
        }
    }, /*#__PURE__*/ React.createElement("input", _object_spread_props(_object_spread({}, rest), {
        name: name,
        className: "nut-input-native",
        ref: inputRef,
        style: {
            // eslint-disable-next-line no-nested-ternary
            textAlign: rtl ? align === 'right' ? 'left' : align === 'left' ? 'right' : 'center' : align
        },
        type: inputType(type),
        maxLength: maxLength,
        placeholder: placeholder === undefined ? locale.placeholder : placeholder,
        disabled: disabled,
        readOnly: readOnly,
        value: value,
        autoFocus: autoFocus,
        enterKeyHint: confirmType,
        onBlur: function(e) {
            handleBlur(e);
        },
        onFocus: function(e) {
            handleFocus(e);
        },
        onChange: function(e) {
            handleInput(e.currentTarget.value);
        },
        onCompositionStart: function(e) {
            composingRef.current = true;
            onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
        },
        onCompositionEnd: function(e) {
            composingRef.current = false;
            onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
        }
    })), clearable && !readOnly && active && value.length > 0 ? /*#__PURE__*/ React.createElement("span", {
        style: {
            display: 'flex',
            alignItems: 'center',
            cursor: 'pointer'
        },
        onClick: function() {
            if (!disabled) {
                setValue('');
                onClear && onClear('');
            }
        }
    }, clearIcon || /*#__PURE__*/ React.createElement(MaskClose, {
        className: "nut-input-clear"
    })) : null);
});
Input.displayName = 'NutInput';
