"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Input", {
    enumerable: true,
    get: function() {
        return Input;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
const _classvarianceauthority = require("class-variance-authority");
const _css = require("../utils/css");
const _inputMask = require("./inputMask");
const _tooltip = require("../tooltip");
const _icon = require("../icon");
const _string = require("../utils/string");
const _utils = require("./utils");
function _getRequireWildcardCache(nodeInterop) {
    if (typeof WeakMap !== "function") return null;
    var cacheBabelInterop = new WeakMap();
    var cacheNodeInterop = new WeakMap();
    return (_getRequireWildcardCache = function(nodeInterop) {
        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
    })(nodeInterop);
}
function _interop_require_wildcard(obj, nodeInterop) {
    if (!nodeInterop && obj && obj.__esModule) {
        return obj;
    }
    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
        return {
            default: obj
        };
    }
    var cache = _getRequireWildcardCache(nodeInterop);
    if (cache && cache.has(obj)) {
        return cache.get(obj);
    }
    var newObj = {
        __proto__: null
    };
    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
    for(var key in obj){
        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
            if (desc && (desc.get || desc.set)) {
                Object.defineProperty(newObj, key, desc);
            } else {
                newObj[key] = obj[key];
            }
        }
    }
    newObj.default = obj;
    if (cache) {
        cache.set(obj, newObj);
    }
    return newObj;
}
const inputVariants = (0, _classvarianceauthority.cva)([
    "orderly-rounded"
], {
    variants: {
        variant: {
            outlined: "orderly-border orderly-border-slate-300",
            filled: "orderly-bg-base-700 orderly-border orderly-border-transparent"
        },
        size: {
            small: "orderly-h-[28px]",
            default: "orderly-h-[40px]"
        },
        fullWidth: {
            true: "orderly-w-full"
        },
        disabled: {
            true: "orderly-opacity-70 orderly-cursor-not-allowed"
        },
        error: {
            true: "orderly-border orderly-border-danger"
        }
    },
    // compoundVariants: [
    //   {
    //     variant: "filled",
    //     error: true,
    //     class: "border border-danger",
    //   },
    //   {
    //     variant: "outlined",
    //   }
    // ],
    defaultVariants: {
        size: "default",
        variant: "filled"
    }
});
const Input = /*#__PURE__*/ (0, _react.forwardRef)(({ className, containerClassName, size, variant, fullWidth, disabled, prefix, suffix, error, onClean, helpText, loading, onChange, onValueChange, thousandSeparator, fixClassName, id, ...props }, ref)=>{
    const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
    const [cursor, setCursor] = (0, _react.useState)(null);
    const innerInputRef = (0, _react.useRef)(null);
    const prevInputValue = (0, _react.useRef)(null);
    const cid = (0, _react.useId)();
    (0, _react.useEffect)(()=>{
        if (!ref) return;
        if (typeof ref === "function") {
            ref(innerInputRef.current);
        } else {
            ref.current = innerInputRef.current;
        }
    }, [
        innerInputRef,
        ref
    ]);
    (0, _react.useEffect)(()=>{
        if (typeof error === "undefined") {
            return;
        }
        setShowTooltip(!!error);
    }, [
        error
    ]);
    // fix cursor pointer jump to end;
    (0, _react.useEffect)(()=>{
        if (document.activeElement !== innerInputRef.current) return;
        // filter the thousands separator
        const nextValueLen = `${props.value}`.length;
        const prevValueLen = prevInputValue.current?.length || 0;
        const next = cursor ? cursor + (nextValueLen - prevValueLen) : 0;
        innerInputRef.current?.setSelectionRange(next, next);
    }, [
        props.value
    ]);
    const onInputChange = (event)=>{
        if (event.target.value.length < props.value?.length) {
            const currentCursor = event.target.selectionStart;
            const diffIndex = (0, _string.findLongestCommonSubString)(`${props.value}`, event.target.value);
            if (diffIndex > -1) {
                const diffStr = `${props.value}`.at(diffIndex);
                if (diffStr === ",") {
                    event.target.value = `${event.target.value.substring(0, diffIndex - 1)}${event.target.value.substring(diffIndex)}`;
                    event.target.selectionStart = currentCursor ? currentCursor - 1 : 0;
                }
            }
        }
        if (typeof onChange === "function") {
            onChange(event);
        }
        if (typeof onValueChange === "function") {
            let value = event.target.value;
            if (thousandSeparator) {
                value = (0, _utils.parseInputHelper)(value);
            }
            onValueChange(value);
        }
        prevInputValue.current = event.target.value;
        setCursor(event.target.selectionStart);
    };
    const cleanButton = (0, _react.useMemo)(()=>{
        if (typeof onClean === "undefined") {
            return null;
        }
        return /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
            className: "orderly-hidden peer-focus:orderly-flex orderly-px-3 orderly-items-center orderly-justify-center",
            onMouseDown: (event)=>{
                event.preventDefault();
                event.stopPropagation();
                onClean?.();
            },
            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                className: "orderly-inline-flex orderly-rounded-full orderly-w-[20px] orderly-h-[20px] orderly-items-center orderly-justify-center",
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.CircleCloseIcon, {
                    size: 16
                })
            })
        });
    }, [
        onClean
    ]);
    const onInputFocus = (event)=>{
        setShowTooltip(!!error);
    };
    const onInputBlur = (event)=>{
        setShowTooltip(false);
    };
    const prefixElement = (0, _react.useMemo)(()=>{
        if (typeof prefix === "undefined") {
            return null;
        }
        if (typeof prefix === "string") {
            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_inputMask.InputMask, {
                name: id || cid,
                className: (0, _css.cn)("orderly-text-3xs orderly-select-none orderly-text-base-contrast-54 orderly-font-semibold desktop:orderly-text-xs", fixClassName),
                children: prefix
            });
        }
        return prefix;
    }, [
        prefix,
        fixClassName
    ]);
    const suffixElement = (0, _react.useMemo)(()=>{
        if (typeof suffix === "undefined") {
            return null;
        }
        if (typeof suffix === "string") {
            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_inputMask.InputMask, {
                name: id || cid,
                className: (0, _css.cn)("orderly-text-3xs orderly-select-none orderly-text-base-contrast-54 orderly-font-semibold desktop:orderly-text-xs", fixClassName),
                children: suffix
            });
        }
        return suffix;
    }, [
        suffix,
        fixClassName
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_tooltip.Tooltip, {
        className: (0, _css.cn)("orderly-text-base-contrast orderly-text-4xs", props.tooltipClassName),
        open: showTooltip,
        content: helpText ?? "input help text",
        sideOffset: 5,
        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
            className: (0, _css.cn)("orderly-input-container", props.readOnly && "orderly-input-container-readonly", "orderly-flex orderly-flex-row orderly-items-center orderly-rounded focus-within:orderly-outline focus-within:orderly-outline-1 orderly-outline-primary", inputVariants({
                size,
                fullWidth,
                disabled,
                variant,
                error
            }), (props.readOnly || !!error) && "focus-within:orderly-outline-none", containerClassName),
            children: [
                prefixElement,
                /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
                    ref: innerInputRef,
                    type: "text",
                    onFocus: onInputFocus,
                    onBlur: onInputBlur,
                    onChange: onInputChange,
                    ...props,
                    id: id || cid,
                    disabled: disabled,
                    className: (0, _css.cn)("orderly-input", "orderly-bg-transparent orderly-px-3 orderly-flex-1 focus-visible:orderly-outline-none orderly-h-full orderly-w-full orderly-peer placeholder:orderly-text-base-contrast-20 placeholder:orderly-text-xs orderly-tabular-nums", typeof prefix !== "undefined" && "orderly-px-0", className)
                }),
                cleanButton,
                suffixElement
            ]
        })
    });
});

//# sourceMappingURL=index.js.map