import { __rest } from '../../../_virtual/_tslib.js';
import React__default, { forwardRef, useState, useEffect } from 'react';
import AlertCircle from '../../../icons/AlertCircle.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 { Prefix, TextFieldInput, Sufix } from './styles.js';

function TextFieldComponent(_a, ref) {
    var { autoComplete = false, id, name, label, value, type = 'text', placeholder, hasError = false, errorText, assistText, optionalText = 'Optional', disabled = false, variant = 'medium', required = true, maxChar, minChar, showCharCount = false, width, prefix, suffix, onSuffixClick, onChange, touched, onBlur, onFocus, onPaste, onKeyUp } = _a, props = __rest(_a, ["autoComplete", "id", "name", "label", "value", "type", "placeholder", "hasError", "errorText", "assistText", "optionalText", "disabled", "variant", "required", "maxChar", "minChar", "showCharCount", "width", "prefix", "suffix", "onSuffixClick", "onChange", "touched", "onBlur", "onFocus", "onPaste", "onKeyUp"]);
    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-field'), 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('char-count') }, getCharacterCount(charCount, maxChar)))),
        React__default.createElement(Border, { hasError: showError, disabled: disabled, hasPrefix: Boolean(prefix), hasSuffix: Boolean(suffix) },
            Boolean(prefix) && (React__default.createElement(Prefix, { "data-testid": appendTestId('prefix') }, prefix)),
            React__default.createElement(TextFieldInput, { hasError: showError, ref: ref, id: id || `input-${name}`, type: type, variant: variant, disabled: disabled, placeholder: placeholder, autoComplete: autoComplete ? 'on' : 'off', maxLength: maxChar, minLength: minChar, value: String(value), onChange: handleChange, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus, onPaste: onPaste, "data-trackid": props['data-trackid'], "data-testid": appendTestId(), "aria-label": props['aria-label'] || label, name: name }),
            Boolean(suffix) && (React__default.createElement(Sufix, { "data-testid": appendTestId('suffix'), hasHandler: Boolean(onSuffixClick), onClick: onSuffixClick && onSuffixClick }, suffix))),
        React__default.createElement(SupportingText, null,
            Boolean(errorText) && showError && !disabled && (React__default.createElement(ErrorMessage, null,
                React__default.createElement(AlertCircle, { width: 20, height: 20 }),
                errorText)),
            !showError &&
                (typeof assistText === 'string' ? (React__default.createElement(AssistMessage, null, assistText)) : (assistText)))));
}
const TextField = forwardRef(TextFieldComponent);

export { TextField };
