{# API #}
{%- set props = props | default([]) -%}
{%- set _helperText = props.helperText | default(null) -%}
{%- set _id = props.id -%}
{%- set _inputProps = props.inputProps | default([]) -%}
{%- set _isDisabled = props.isDisabled | default(false) -%}
{%- set _isFluid = props.isFluid | default(false) -%}
{%- set _isLabelHidden = props.isLabelHidden | default(false) -%}
{%- set _isMultiline = props.isMultiline | default(false) -%}
{%- set _isRequired = props.isRequired | default(false) -%}
{%- set _label = props.label | default(null) -%}
{%- set _name = props.name | default(null) -%}
{%- set _type = props.type | default('text') -%}
{%- set _unsafeHelperText = props.UNSAFE_helperText | default(null) -%}
{%- set _unsafeLabel = props.UNSAFE_label | default(null) -%}
{%- set _unsafeValidationText = props.UNSAFE_validationText | default(null) -%}
{%- set _validationState = props.validationState | default(null) -%}
{%- set _validationText = props.validationText | default(null) -%}
{%- set _value = props.value | default(null) -%}

{# Extended API for TextArea #}
{%- set _isAutoResizing = props.isAutoResizing | default(false) -%}

{# Extended API for TextField #}
{%- set _hasPasswordToggle = props.hasPasswordToggle | default(false) -%}
{%- set _inputWidth = props.inputWidth | default(null) -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ _isMultiline ? 'TextArea' : 'TextField' -%}
{%- set _inputClassName = _rootClassName ~ '__input' -%}
{%- set _labelClassName = _rootClassName ~ '__label' -%}
{%- set _labelHiddenClassName = _isLabelHidden ? _rootClassName ~ '__label--hidden' : null -%}
{%- set _labelRequiredClassName = _isRequired ? _rootClassName ~ '__label--required' : null -%}
{%- set _passwordToggleButtonClassName = _rootClassName ~ '__passwordToggle__button' -%}
{%- set _passwordToggleClassName = _rootClassName ~ '__passwordToggle' -%}
{%- set _passwordToggleIconClassName = _rootClassName ~ '__passwordToggle__icon' -%}
{%- set _passwordToggleIconShownClassName = _rootClassName ~ '__passwordToggle__icon--shown' -%}
{%- set _passwordToggleIconHiddenClassName = _rootClassName ~ '__passwordToggle__icon--hidden' -%}
{%- set _rootDisabledClassName = _isDisabled ? _rootClassName ~ '--disabled' : null -%}
{%- set _rootFluidClassName = _isFluid ? _rootClassName ~ '--fluid' : null -%}
{%- set _rootValidationStateClassName = _validationState ? _rootClassName ~ '--' ~ _validationState : null -%}
{%- set _helperTextClassName = _rootClassName ~ '__helperText' -%}
{%- set _validationTextClassName = _rootClassName ~ '__validationText' -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootFluidClassName, _rootValidationStateClassName, _styleProps.className ] -%}
{%- set _helperTextId = _helperText or _unsafeHelperText ? _id ~ '-helper-text' : null -%}
{%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
{%- set _allowedAttributes = [ 'autocomplete', 'placeholder'] -%}
{%- set _textFieldAllowedAttributes = _allowedAttributes | merge([ 'value' ]) -%}
{%- set _textAreaAllowedAttributes = _allowedAttributes | merge([ 'rows' ]) -%}
{%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}

{# Attributes #}
{%- set _ariaDescribedByAttr = _helperTextId or _validationTextId ? 'aria-describedby="' ~ [ _helperTextId, _validationTextId ] | join (' ') | trim ~ '"' : null -%}
{%- set _dataToggleAttr = _isAutoResizing and _isMultiline ? 'data-spirit-toggle=autoResize' : null -%}
{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
{%- set _requiredAttr = _isRequired ? 'required' : null -%}

{# Extended Attributes for TextField #}
{%- set _inputWidthAttr = _inputWidth ? 'size="' ~ _inputWidth | escape('html_attr') ~ '"' : null -%}

{# MainProps #}
{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop is not same as('id') and (_dataToggleAttr is null or prop is not same as('data-spirit-toggle'))) -%}

<div {{ mainProps(_mainPropsWithoutReservedAttributes) }} {{ styleProp(_styleProps) }} {{ classProp(_rootClassNames) }} {{ _dataToggleAttr }}>
    <label for="{{ _id }}" {{ classProp(_labelClassNames) }}>
        {%- if _unsafeLabel -%}
            {{ _unsafeLabel | raw }}
        {%- else -%}
            {{ _label }}
        {%- endif -%}
    </label>
    {% if _isMultiline %}
        <textarea
            {{ inputProps(props, _textAreaAllowedAttributes, _inputProps) }}
            id="{{ _id }}"
            name="{{ _name }}"
            class="{{ _inputClassName }}"
            {{ _disabledAttr }}
            {{ _requiredAttr }}
            {{ _ariaDescribedByAttr | raw }}
        >{{ _value }}</textarea>{# Intentionally without `raw` to prevent XSS. #}
    {% else %}
        {% if _hasPasswordToggle %}
            <div class="{{ _passwordToggleClassName }}">
                <input
                    {{ inputProps(props, _textFieldAllowedAttributes, _inputProps) }}
                    type="password"
                    id="{{ _id }}"
                    name="{{ _name }}"
                    class="{{ _inputClassName }}"
                    {{ _disabledAttr }}
                    {{ _inputWidthAttr | raw }}
                    {{ _requiredAttr }}
                    {{ _ariaDescribedByAttr | raw }}
                />
                <button
                    type="button"
                    class="{{ _passwordToggleButtonClassName }}"
                    role="switch"
                    aria-pressed="false"
                    aria-label="Show password"
                    data-spirit-toggle="password"
                    {{ _disabledAttr }}
                >
                    <span class="{{ _passwordToggleIconClassName }} {{ _passwordToggleIconHiddenClassName }}">
                        <Icon name="visibility-on" />
                    </span>
                    <span class="{{ _passwordToggleIconClassName }} {{ _passwordToggleIconShownClassName }}">
                        <Icon name="visibility-off" />
                    </span>
                </button>
            </div>
        {% else %}
            <input
                {{ inputProps(props, _textFieldAllowedAttributes, _inputProps) }}
                type="{{ _type }}"
                id="{{ _id }}"
                name="{{ _name }}"
                class="{{ _inputClassName }}"
                {{ _disabledAttr }}
                {{ _inputWidthAttr | raw }}
                {{ _requiredAttr }}
                {{ _ariaDescribedByAttr | raw }}
            />
        {% endif %}
    {% endif %}
    <HelperText
        className="{{ _helperTextClassName }}"
        helperText="{{ _helperText }}"
        id="{{ _helperTextId }}"
        UNSAFE_helperText="{{ _unsafeHelperText }}"
    />
    <ValidationText
        className="{{ _validationTextClassName }}"
        id="{{ _validationTextId }}"
        validationState="{{ _validationState }}"
        validationText="{{ _validationText }}"
        UNSAFE_validationText="{{ _unsafeValidationText }}"
    />
</div>
