import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useId, useState } from 'react';
import { Box, Label } from '..';
import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
import { helpTextSize, inputColors } from '../input/consts';
import HelpText from '../input/helpText';
import T from '../t';
import { cs, filterUndefined, isString } from '../utils';
import { getInitialCount } from './helpers';
const TextareaTextarea = 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;
  }
`;
export const TextareaBase = 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.
 */
export const Textarea = vui((props, ref) => {
    const { 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, ...rest } = omitThemingProps(props);
    const generatedId = useId();
    const [count, setCount] = useState(getInitialCount(props));
    const [valueInternal, setValueInternal] = useState(defaultValue);
    const id = idProp || generatedId;
    const styles = useStyleConfig('Textarea', props);
    function onChange(e) {
        setValueInternal(e.target.value);
        setCount(e.target.value.length);
        onChangeProp?.(e);
    }
    const aliasedProps = filterUndefined({
        'aria-disabled': disabled,
    });
    const textareaAliasedProps = 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,
    });
    useEffect(() => {
        setValueInternal(value);
        setCount(value?.toString()?.length ? `${value}`.length : 0);
    }, [value]);
    return (_jsxs(Box, { className: "vui-textareaContainer", column: true, ref: ref, ...rest, children: [isString(label) ? (_jsx(Label, { "aria-disabled": disabled, className: "vui-textareaLabel", htmlFor: id, markAsOptional: labelMarkOptional, mb: 0.5, text: label, tooltipText: labelTooltipText, ...styles.label })) : (label), _jsxs(TextareaBase, { className: cs('vui-textarea', className), ...styles.container, ...aliasedProps, children: [_jsx(TextareaTextarea, { 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 && (_jsxs(T, { className: "vui-textareaCount", color: maxLength && count > maxLength ? inputColors.error : inputColors.helpText, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)", children: [count, " ", maxLength ? `/ ${maxLength}` : null] })), !!helpText && _jsx(HelpText, { size: helpTextSize['lg'], children: helpText }), !!errorText && (_jsx(HelpText, { isError: true, size: helpTextSize['lg'], children: errorText }))] })] }));
});
Textarea.displayName = 'Textarea';
export default Textarea;
//# sourceMappingURL=textarea.js.map