{# API #}
{%- set props = props | default([]) -%}
{%- set _dragAndDropText = props.dragAndDropText | default('or drag and drop here') -%}
{%- set _helperText = props.helperText | default(null) -%}
{%- set _iconName = props.iconName | default('upload') -%}
{%- set _id = props.id -%}
{%- set _isDisabled = props.isDisabled | default(false) -%}
{%- set _isLabelHidden = props.isLabelHidden | default(false) -%}
{%- set _isRequired = props.isRequired | default(false) -%}
{%- set _label = props.label | default(null) -%}
{%- set _maxFileSize = props.maxFileSize | default(null) -%}
{%- set _maxUploadedFiles = props.maxUploadedFiles | default(null) -%}
{%- set _name = props.name | default(null) -%}
{%- set _pickAFileText = props.pickAFileText | default('Upload your file') -%}
{%- set _queueLimitBehavior = props.queueLimitBehavior | default(null) -%}
{%- 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) -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'FileUploaderInput' -%}
{%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'FileUploaderInput--disabled' : null -%}
{%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'FileUploaderInput--' ~ _validationState : null -%}
{%- set _dropzoneClassName = _spiritClassPrefix ~ 'FileUploaderInput__dropZone' -%}
{%- set _dropzoneLabelClassName = _spiritClassPrefix ~ 'FileUploaderInput__dropZoneLabel' -%}
{%- set _dragAndDropLabelClassName = _spiritClassPrefix ~ 'FileUploaderInput__dragAndDropLabel' -%}
{%- set _helperTextClassName = _spiritClassPrefix ~ 'FileUploaderInput__helperText' -%}
{%- set _inputClassName = _spiritClassPrefix ~ 'FileUploaderInput__input' -%}
{%- set _labelClassName = _spiritClassPrefix ~ 'FileUploaderInput__label' -%}
{%- set _labelHiddenClassName = _isLabelHidden ? _spiritClassPrefix ~ 'FileUploaderInput__label--hidden' : null -%}
{%- set _labelRequiredClassName = _isRequired ? _spiritClassPrefix ~ 'FileUploaderInput__label--required' : null -%}
{%- set _linkClassName = _spiritClassPrefix ~ 'FileUploaderInput__link' -%}
{%- set _linkPrimaryClassName = _spiritClassPrefix ~ 'link-primary' -%}
{%- set _linkUnderlinedClassName = _spiritClassPrefix ~ 'link-underlined' -%}
{%- set _validationTextClassName = _spiritClassPrefix ~ 'FileUploaderInput__validationText' -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _allowedAttributes = [ 'accept', 'multiple' ] -%}
{%- set _helperTextId = _helperText or _unsafeHelperText ? _id ~ '-helper-text' : null -%}
{%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['data-spirit-element', 'id']) -%}
{%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootValidationStateClassName, _styleProps.className ] -%}
{%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}

{# Attributes #}
{%- set _ariaDescribedByAttr = _helperTextId or _validationTextId ? 'aria-describedby="' ~ [ _helperTextId, _validationTextId ] | join (' ') | trim ~ '"' : null -%}
{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
{%- set _nameAttr = _name ? 'name="' ~ _name | escape('html_attr') ~ '"' : null -%}
{%- set _dataMaxFileSizeAttr = _maxFileSize ? 'data-spirit-max-file-size=' ~ _maxFileSize : null -%}
{%- set _dataMaxUploadedFilesAttr = _maxUploadedFiles ? 'data-spirit-file-queue-limit=' ~ _maxUploadedFiles : null -%}
{%- set _dataQueueLimitBehaviorAttr = _queueLimitBehavior ? 'data-spirit-queue-limit-behavior=' ~ _queueLimitBehavior : null -%}

<div
    {{ mainProps(_mainPropsWithoutReservedAttributes) }}
    {{ classProp(_rootClassNames) }}
    {{ styleProp(_styleProps) }}
    {{ _dataMaxFileSizeAttr }}
    {{ _dataMaxUploadedFilesAttr }}
    {{ _dataQueueLimitBehaviorAttr }}
    data-spirit-element="wrapper"
>
    <label for="{{ _id }}" {{ classProp(_labelClassNames) }}>
        {%- if _label -%}
            {{ _label }}
        {%- else -%}
            {{ _unsafeLabel | raw }}
        {%- endif -%}
    </label>
    <input
        {{ inputProps(props, _allowedAttributes) }}
        type="file"
        id="{{ _id }}"
        class="{{ _inputClassName }}"
        data-spirit-element="input"
        {{ _nameAttr | raw }}
        {{ _disabledAttr }}
        {{ _ariaDescribedByAttr | raw }}
    />
    <div class="{{ _dropzoneClassName }}" data-spirit-element="dropZone">
        <Icon name="{{ _iconName }}" isReusable={ false } />
        <label for="{{ _id }}" class="{{ _dropzoneLabelClassName }}">
            <span {{ classProp([_linkClassName, _linkPrimaryClassName, _linkUnderlinedClassName]) }}>
                {{- _pickAFileText -}}
            </span>
            <span class="{{  _dragAndDropLabelClassName }}">
                {{- _dragAndDropText -}}
            </span>
        </label>
        <HelperText
            className="{{ _helperTextClassName }}"
            helperText="{{ _helperText }}"
            id="{{ _helperTextId }}"
            UNSAFE_helperText="{{ _unsafeHelperText }}"
        />
    </div>
    <ValidationText
        className="{{ _validationTextClassName }}"
        id="{{ _validationTextId }}"
        validationState="{{ _validationState }}"
        validationText="{{ _validationText }}"
        UNSAFE_validationText="{{ _unsafeValidationText }}"
    />
</div>
