"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextAreaInput = void 0;
const react_1 = __importDefault(require("react"));
const varsUtilities_1 = require("../../varsUtilities");
const __1 = require("..");
const inlines_1 = require("inlines");
const useControllableState_1 = require("../../hooks/useControllableState");
function TextAreaInput({ style, value: valueProp, defaultValue: defaultValueProp = '', onChange: onChangeProp, disabled, placeholder, error, maxLength, autoFocus, }) {
    const [value, setValue] = (0, useControllableState_1.useControllableState)({
        prop: valueProp,
        defaultProp: defaultValueProp,
        onChange: onChangeProp,
    });
    return (react_1.default.createElement(inlines_1.styled.div, { "data-value": value, style: {
            boxSizing: 'border-box',
            position: 'relative',
            display: 'grid',
            width: '100%',
            '&::after': {
                width: '100%',
                content: `attr(data-value) " "`,
                whiteSpace: 'pre-wrap',
                wordBreak: 'break-all',
                visibility: 'hidden',
                gridArea: '1 / 1 / 2 / 2',
                border: '1px solid transparent',
                padding: '6px 12px',
                fontSize: '14px',
                lineHeight: '24px',
                fontFamily: 'Inter',
            },
        } },
        react_1.default.createElement(inlines_1.styled.textarea, { autoFocus: autoFocus, value: value, onChange: (e) => {
                setValue(e.target.value);
            }, placeholder: placeholder, maxLength: maxLength, rows: 3, style: {
                outline: 'none',
                boxSizing: 'border-box',
                resize: 'none',
                background: (0, varsUtilities_1.color)('background', 'default'),
                overflow: 'hidden',
                gridArea: '1 / 1 / 2 / 2',
                padding: '6px 12px',
                fontSize: '14px',
                lineHeight: '24px',
                fontFamily: 'Inter',
                color: (0, varsUtilities_1.color)('content', 'default', 'primary'),
                '&::placeholder': {
                    color: (0, varsUtilities_1.color)('content', 'default', 'secondary'),
                },
                borderRadius: 8,
                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': {
                    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')}`,
                },
            } }),
        maxLength && value.length >= maxLength - 5 && (react_1.default.createElement(__1.Text, { style: {
                position: 'absolute',
                right: 0,
                bottom: 0,
                transform: 'translateY(100%)',
                fontSize: 12,
            } },
            value.length,
            "/",
            maxLength))));
}
exports.TextAreaInput = TextAreaInput;
//# sourceMappingURL=TextAreaInput.js.map