"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = exports.InputBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const box_1 = __importDefault(require("../box"));
const button_1 = require("../button");
const core_1 = require("../core");
const label_1 = __importDefault(require("../label"));
const t_1 = require("../t");
const utils_1 = require("../utils");
const autoCompletePopover_1 = __importDefault(require("./autoCompletePopover"));
const consts_1 = require("./consts");
const context_1 = require("./context");
const helpers_1 = require("./helpers");
const helpText_1 = __importDefault(require("./helpText"));
const inputIcon_1 = __importDefault(require("./inputIcon"));
const inputInput_1 = __importDefault(require("./inputInput"));
exports.InputBase = core_1.styled.divBox `
  align-items: center;
  color: sandstone.10;
  background-color: white;
  border-radius: none;
  border-width: 1px;
  display: flex;
  flex-shrink: 0;
  outline: none;
  position: relative;
  transition-duration: 0s;
  transform: translate3d(0, 0, 0);
  width: 100%;

  &[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: sandstone.79;
    border-color: sandstone.79;
  }
`;
/**
 * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
 * Forwards many relevant props to the inner input. Handles different states, like loading or error.
 * Exposes some props to the children via context.
 */
exports.Input = (0, core_1.vui)((props, ref) => {
    var _a, _b;
    const { allowClear, ariaLabel, autoComplete, autoCompleteMaxHeight, autoCompleteOptions, autoFocus, children, className, defaultValue, disabled, displayValueOnly, errorText, helpText, iconLeft, iconRight, id: idProp, input, inputProps, inputRef, itemLeft, itemRight, label, labelMarkOptional, labelTooltipText, max, maxLength, min, minLength, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size = 'lg', state = '', stateMapping, step, type = 'text', value, variant } = props, rest = __rest(props, ["allowClear", "ariaLabel", "autoComplete", "autoCompleteMaxHeight", "autoCompleteOptions", "autoFocus", "children", "className", "defaultValue", "disabled", "displayValueOnly", "errorText", "helpText", "iconLeft", "iconRight", "id", "input", "inputProps", "inputRef", "itemLeft", "itemRight", "label", "labelMarkOptional", "labelTooltipText", "max", "maxLength", "min", "minLength", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
    const generatedId = (0, react_1.useId)();
    const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
    const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue || '');
    const states = Object.assign(Object.assign({}, consts_1.inputStateMapping), stateMapping);
    const id = idProp || generatedId;
    const styles = (0, core_1.useStyleConfig)('Input', props);
    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ disabled, size, variant }), [disabled, size, variant]);
    function onChange(e) {
        const inputValue = e.target.value;
        // Limit input length if maxLength is set
        const value = maxLength ? inputValue.slice(0, maxLength) : inputValue;
        setValueInternal(value);
        setCount(value === null || value === void 0 ? void 0 : value.length);
        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
    }
    function onAutoCompleteSelect(value) {
        const e = { target: { value }, type: 'autoCompleteSelect' };
        onChange(e);
    }
    function onClear() {
        const value = '';
        const e = { target: { value }, type: 'onClear' };
        setValueInternal(value);
        setCount(0);
        onChange(e);
    }
    const aliasedProps = (0, utils_1.filterUndefined)({
        'aria-disabled': disabled,
        bg: readOnly ? 'sandstone.97' : undefined,
        borderColor: readOnly ? 'sandstone.55' : undefined,
        focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
        focusWithinRingColor: readOnly ? 'transparent' : undefined,
    });
    (0, react_1.useEffect)(() => {
        var _a;
        if (value === undefined && defaultValue !== undefined)
            return;
        setValueInternal(value !== null && value !== void 0 ? value : '');
        setCount(((_a = value === null || value === void 0 ? void 0 : value.toString()) === null || _a === void 0 ? void 0 : _a.length) ? `${value}`.length : 0);
    }, [value]);
    const filterAutoCompleteOptions = (i) => valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase());
    return ((0, jsx_runtime_1.jsx)(context_1.InputProvider, { value: context, children: displayValueOnly ? ((0, jsx_runtime_1.jsx)(t_1.T, { className: (0, utils_1.cs)('vui-input-value', className), size: consts_1.displayValueOnlyTextSize[size], children: value || defaultValue })) : ((0, jsx_runtime_1.jsx)(autoCompletePopover_1.default, { autoCompleteMaxHeight: autoCompleteMaxHeight, autoCompleteOptions: autoCompleteOptions, filterAutoCompleteOptions: filterAutoCompleteOptions, onAutoCompleteSelect: onAutoCompleteSelect, children: (0, jsx_runtime_1.jsxs)(box_1.default, Object.assign({ className: "vui-inputContainer", column: true, ref: ref }, rest, { children: [(0, utils_1.isString)(label) ? ((0, jsx_runtime_1.jsx)(label_1.default, Object.assign({ "aria-disabled": disabled, className: "vui-inputLabel", htmlFor: id, markAsOptional: labelMarkOptional, mb: 0.5, text: label, tooltipText: labelTooltipText }, styles.label))) : (label), (0, jsx_runtime_1.jsxs)(exports.InputBase, Object.assign({ className: (0, utils_1.cs)('vui-input', className) }, styles.container, aliasedProps, { children: [itemLeft, (0, utils_1.isString)(iconLeft) ? (0, jsx_runtime_1.jsx)(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_a = children !== null && children !== void 0 ? children : input) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(inputInput_1.default, Object.assign({ ref: inputRef, autoFocus,
                                ariaLabel,
                                disabled,
                                id,
                                max,
                                maxLength,
                                min,
                                minLength,
                                name,
                                onBlur,
                                onChange,
                                onFocus,
                                pattern,
                                placeholder,
                                readOnly,
                                required,
                                step,
                                type, autoComplete: (autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.length) ? 'off' : autoComplete, value: valueInternal }, inputProps))), (0, utils_1.isString)(iconRight) ? (0, jsx_runtime_1.jsx)(inputIcon_1.default, { mr: 1, name: iconRight }) : iconRight, itemRight, state && (0, jsx_runtime_1.jsx)(inputIcon_1.default, Object.assign({ mr: 1 }, (_b = states[state]) === null || _b === void 0 ? void 0 : _b.iconProps)), allowClear && ((0, jsx_runtime_1.jsx)(button_1.IconButton, { disabled: !valueInternal, icon: "falTimes", mr: 0.5, onClick: onClear, size: consts_1.clearIconSize[size], title: "Clear" })), showCount && ((0, jsx_runtime_1.jsxs)(t_1.T, { className: "vui-inputCount", color: maxLength && count > maxLength ? consts_1.inputColors.error : consts_1.inputColors.helpText, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)", children: [count, " ", maxLength ? `/ ${maxLength}` : null] }))] })), !!helpText && (0, jsx_runtime_1.jsx)(helpText_1.default, { size: consts_1.helpTextSize[size], children: helpText }), !!errorText && ((0, jsx_runtime_1.jsx)(helpText_1.default, { isError: true, size: consts_1.helpTextSize[size], children: errorText }))] })) })) }));
});
exports.Input.Icon = inputIcon_1.default;
exports.Input.Input = inputInput_1.default;
exports.Input.HelpText = helpText_1.default;
exports.Input.displayName = 'Input';
exports.default = exports.Input;
//# sourceMappingURL=input.js.map