'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _tslib = require('../../../_virtual/_tslib.js');
var React = require('react');
var AlertTriangle = require('../../../icons/AlertTriangle.js');
var index = require('../../../utils/index.js');
var styles = require('../styles.js');
var utils = require('../utils.js');
var styles$1 = require('./styles.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

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 = _tslib.__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] = React.useState(0);
    const [showError, setShowError] = React.useState(false);
    React.useEffect(() => {
        if (value && typeof value === 'string') {
            setCharCount(value.length);
        }
    }, []);
    React.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 = index.getId(props['data-testid']);
    return (React__default['default'].createElement(styles.Wrapper, { "data-testid": appendTestId('text-area'), width: width },
        React__default['default'].createElement(styles.LabelWrapper, { disabled: disabled, hasLabel: Boolean(label === null || label === void 0 ? void 0 : label.length) },
            label && (React__default['default'].createElement(styles.Label, { htmlFor: id || `input-${name}`, disabled: disabled }, label)),
            !required && !showCharCount && React__default['default'].createElement(styles.Text, null, optionalText),
            showCharCount && (React__default['default'].createElement(styles.Text, { "data-testid": appendTestId('character-count') }, utils.getCharacterCount(charCount, maxChar)))),
        React__default['default'].createElement(styles.Border, { hasError: showError, disabled: disabled },
            React__default['default'].createElement(styles$1.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['default'].createElement(styles.SupportingText, null,
            Boolean(errorText) && showError && !disabled && (React__default['default'].createElement(styles.ErrorMessage, null,
                React__default['default'].createElement(AlertTriangle['default'], { width: 20, height: 20 }),
                errorText)),
            !showError &&
                (typeof assistText === 'string' ? (React__default['default'].createElement(styles.AssistMessage, null, assistText)) : (assistText)))));
}

exports.TextArea = TextArea;
