"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.Textarea = exports.TextareaBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const __1 = require("..");
const core_1 = require("../core");
const consts_1 = require("../input/consts");
const helpText_1 = __importDefault(require("../input/helpText"));
const t_1 = __importDefault(require("../t"));
const utils_1 = require("../utils");
const helpers_1 = require("./helpers");
const TextareaTextarea = core_1.styled.textareaBox `
  border-radius: none;
  border-width: 1px;
  outline: none;
  padding: 1;
  resize: none;
  min-height: 80px;
  transition-duration: fast;
  width: 100%;

  &[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: sandstone.79;
    border-color: sandstone.79;
  }
`;
exports.TextareaBase = core_1.styled.divBox `
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
`;
/**
 * Displays a textarea element wrapped in a div to allow extra content, like counter.
 * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
 */
exports.Textarea = (0, core_1.vui)((props, ref) => {
    const _a = (0, core_1.omitThemingProps)(props), { autoFocus, ariaLabel, className, colorScheme: colorSchemeProp, cols, defaultValue, disabled, errorText, id: idProp, helpText, label, labelMarkOptional, labelTooltipText, maxLength, name, onBlur, onChange: onChangeProp, onFocus, placeholder, readOnly, required, resize = 'none', rows, showCount, textareaProps = {}, textareaRef, value } = _a, rest = __rest(_a, ["autoFocus", "ariaLabel", "className", "colorScheme", "cols", "defaultValue", "disabled", "errorText", "id", "helpText", "label", "labelMarkOptional", "labelTooltipText", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "rows", "showCount", "textareaProps", "textareaRef", "value"]);
    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 id = idProp || generatedId;
    const styles = (0, core_1.useStyleConfig)('Textarea', props);
    function onChange(e) {
        setValueInternal(e.target.value);
        setCount(e.target.value.length);
        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
    }
    const aliasedProps = (0, utils_1.filterUndefined)({
        'aria-disabled': disabled,
    });
    const textareaAliasedProps = (0, utils_1.filterUndefined)({
        'aria-disabled': disabled,
        'aria-label': ariaLabel,
        bg: readOnly ? 'sandstone.97' : undefined,
        borderColor: readOnly ? 'sandstone.55' : undefined,
        focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
        focusWithinRingColor: readOnly ? 'transparent' : undefined,
    });
    (0, react_1.useEffect)(() => {
        var _a;
        setValueInternal(value);
        setCount(((_a = value === null || value === void 0 ? void 0 : value.toString()) === null || _a === void 0 ? void 0 : _a.length) ? `${value}`.length : 0);
    }, [value]);
    return ((0, jsx_runtime_1.jsxs)(__1.Box, Object.assign({ className: "vui-textareaContainer", column: true, ref: ref }, rest, { children: [(0, utils_1.isString)(label) ? ((0, jsx_runtime_1.jsx)(__1.Label, Object.assign({ "aria-disabled": disabled, className: "vui-textareaLabel", htmlFor: id, markAsOptional: labelMarkOptional, mb: 0.5, text: label, tooltipText: labelTooltipText }, styles.label))) : (label), (0, jsx_runtime_1.jsxs)(exports.TextareaBase, Object.assign({ className: (0, utils_1.cs)('vui-textarea', className) }, styles.container, aliasedProps, { children: [(0, jsx_runtime_1.jsx)(TextareaTextarea, Object.assign({ className: "vui-textareaTextarea", ref: textareaRef, autoFocus,
                        cols,
                        defaultValue,
                        disabled,
                        id,
                        maxLength,
                        name,
                        onBlur,
                        onChange,
                        onFocus,
                        placeholder,
                        readOnly,
                        required,
                        resize,
                        rows, value: valueInternal }, styles.textarea, textareaAliasedProps, textareaProps)), showCount && ((0, jsx_runtime_1.jsxs)(t_1.default, { className: "vui-textareaCount", 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['lg'], children: helpText }), !!errorText && ((0, jsx_runtime_1.jsx)(helpText_1.default, { isError: true, size: consts_1.helpTextSize['lg'], children: errorText }))] }))] })));
});
exports.Textarea.displayName = 'Textarea';
exports.default = exports.Textarea;
//# sourceMappingURL=textarea.js.map