import { __rest } from '../../../_virtual/_tslib.js';
import React__default, { useState, useEffect } from 'react';
import AlertTriangle from '../../../icons/AlertTriangle.js';
import { getId } from '../../../utils/index.js';
import { Wrapper, LabelWrapper, Label, Text, Border, SupportingText, ErrorMessage, AssistMessage } from '../styles.js';
import { getCharacterCount } from '../utils.js';
import { TextAreaInput } from './styles.js';

function TextArea(_a) {
    var { autoComplete = false, disabled = false, label, id, name, placeholder, required = true, showCharCount = false, width, maxChar, minChar, hasError = false, errorText, touched, assistText, optionalText = 'Optional', variant, onChange, onKeyUp, onBlur, onFocus, value } = _a, props = __rest(_a, ["autoComplete", "disabled", "label", "id", "name", "placeholder", "required", "showCharCount", "width", "maxChar", "minChar", "hasError", "errorText", "touched", "assistText", "optionalText", "variant", "onChange", "onKeyUp", "onBlur", "onFocus", "value"]);
    const [charCount, setCharCount] = useState(0);
    const [showError, setShowError] = useState(false);
    useEffect(() => {
        if (value && typeof value === 'string') {
            setCharCount(value.length);
        }
    }, []);
    useEffect(() => {
        const composeError = typeof touched === 'undefined' ? hasError : hasError && touched;
        setShowError(composeError);
    }, [hasError, touched]);
    function handleChange(event) {
        setCharCount(event.target.value.length);
        onChange(event);
    }
    const appendTestId = getId(props['data-testid']);
    return (React__default.createElement(Wrapper, { "data-testid": appendTestId('text-area'), width: width },
        React__default.createElement(LabelWrapper, { disabled: disabled, hasLabel: Boolean(label === null || label === void 0 ? void 0 : label.length) },
            label && (React__default.createElement(Label, { htmlFor: id || `input-${name}`, disabled: disabled }, label)),
            !required && !showCharCount && React__default.createElement(Text, null, optionalText),
            showCharCount && (React__default.createElement(Text, { "data-testid": appendTestId('character-count') }, getCharacterCount(charCount, maxChar)))),
        React__default.createElement(Border, { hasError: showError, disabled: disabled },
            React__default.createElement(TextAreaInput, { id: id || `input-${name}`, name: name, placeholder: placeholder, variant: variant, autoComplete: autoComplete ? 'on' : 'off', disabled: disabled, maxLength: maxChar, minLength: minChar, value: String(value), onChange: handleChange, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus, "data-testid": appendTestId(), "data-trackid": props['data-trackid'], "aria-label": props['aria-label'] || label })),
        React__default.createElement(SupportingText, null,
            Boolean(errorText) && showError && !disabled && (React__default.createElement(ErrorMessage, null,
                React__default.createElement(AlertTriangle, { width: 20, height: 20 }),
                errorText)),
            !showError &&
                (typeof assistText === 'string' ? (React__default.createElement(AssistMessage, null, assistText)) : (assistText)))));
}

export { TextArea };
