"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextInput = void 0;
const react_1 = __importDefault(require("react"));
const varsUtilities_1 = require("../../varsUtilities");
const icons_1 = require("../../icons");
const components_1 = require("../../components");
const inlines_1 = require("inlines");
const useControllableState_1 = require("../../hooks/useControllableState");
function TextInput({ prefix, suffix, icon, style, value: valueProp, defaultValue: defaultValueProp = '', onChange: onChangeProp, onFocus, onBlur, clearButton = false, afterIcon, disabled, placeholder, error, password, maxLength, autoFocus, }) {
    const [value, setValue] = (0, useControllableState_1.useControllableState)({
        prop: valueProp,
        defaultProp: defaultValueProp,
        onChange: onChangeProp,
    });
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            position: 'relative',
            minHeight: 40,
            width: '100%',
            padding: '0 12px',
            borderRadius: 8,
            display: 'flex',
            alignItems: 'center',
            backgroundColor: 'transparent',
            fontSize: '14px',
            lineHeight: '24px',
            boxSizing: 'border-box',
            color: (0, varsUtilities_1.color)('content', 'default', value === '' ? 'secondary' : 'primary'),
            border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', error ? 'alert' : 'neutralNormal', 'default')}`,
            '&:hover': {
                border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', error ? 'alert' : 'neutralHover', 'default')}`,
            },
            '&:focus-within': {
                border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', error ? 'alert' : 'active', 'default')}`,
                boxShadow: error
                    ? `0 0 0 2px ${(0, varsUtilities_1.color)('inputBorder', 'alert', 'default')}`
                    : `0 0 0 2px ${(0, varsUtilities_1.color)('border', 'brand', 'subtle')}`,
            },
            '& > * + *': {
                // px instead of raw number bc of https://github.com/atelier-saulx/inlines/issues/1
                marginLeft: '8px',
            },
            ...(disabled
                ? {
                    opacity: '50%',
                }
                : {}),
            ...style,
        } },
        icon && react_1.default.createElement(inlines_1.styled.div, { style: { flexShrink: 0 } }, icon),
        prefix && react_1.default.createElement(components_1.Badge, { ...prefix }),
        react_1.default.createElement(inlines_1.styled.input, { value: value, onChange: (e) => {
                setValue(e.target.value);
            }, onFocus: onFocus, onBlur: (e) => onBlur?.(e.target.value), style: {
                width: '100%',
                height: 38,
                appearance: 'none',
                background: 'transparent',
                fontSize: '14px',
                lineHeight: '24px',
                fontWeight: 400,
                textOverflow: 'ellipsis',
                border: 'none',
                padding: 0,
                color: (0, varsUtilities_1.color)('content', 'default', 'primary'),
                '&::placeholder': {
                    color: (0, varsUtilities_1.color)('content', 'default', 'secondary'),
                },
                '&:focus': {
                    outline: 'none',
                },
            }, placeholder: placeholder, type: password ? 'password' : 'inherit', maxLength: maxLength, autoFocus: autoFocus }),
        suffix && react_1.default.createElement(components_1.Badge, { ...suffix }),
        (clearButton || afterIcon) && (react_1.default.createElement("div", { style: { flexShrink: 0 } }, clearButton && value ? (react_1.default.createElement(icons_1.IconClose, { onClick: () => {
                setValue('');
            } })) : (afterIcon))),
        maxLength && value.length >= maxLength - 5 && (react_1.default.createElement(components_1.Text, { style: {
                position: 'absolute',
                right: 0,
                bottom: 0,
                transform: 'translateY(100%)',
                fontSize: 12,
            } },
            value.length,
            "/",
            maxLength))));
}
exports.TextInput = TextInput;
//# sourceMappingURL=TextInput.js.map