{% from "components/input/_macro.njk" import onsInput %}

{% macro onsAutosuggest(params) %}
    <div
        id="{{ params.id }}-container"
        class="ons-autosuggest{{ ' ons-js-autosuggest' if not params.externalInitialiser }}{{ ' ons-js-address-not-editable' if params.isEditable == false }}{{ ' ons-js-address-mandatory' if params.mandatory == true }}{{ ' ' + params.containerClasses if params.containerClasses else '' }}"
        data-instructions="{{ params.instructions }}"
        data-aria-you-have-selected="{{ params.ariaYouHaveSelected }}"
        data-min-chars="{{ params.minChars }}"
        data-aria-min-chars="{{ params.ariaMinChars }}"
        data-aria-one-result="{{ params.ariaOneResult }}"
        data-aria-n-results="{{ params.ariaNResults }}"
        data-aria-limited-results="{{ params.ariaLimitedResults }}"
        data-more-results="{{ params.moreResults }}"
        data-results-title="{{ params.resultsTitle }}"
        data-no-results="{{ params.noResults }}"
        data-type-more="{{ params.typeMore }}"
        {% if params.resultsThreshold %}data-result-threshold="{{ params.resultsThreshold }}"{% endif %}
        {% if params.apiDomain %}data-api-domain="{{ params.apiDomain }}"{% endif %}
        {% if params.apiDomainBearerToken %}data-authorization-token="{{ params.apiDomainBearerToken }}"{% endif %}
        {% if params.apiManualQueryParams == true %}data-query-params=""{% endif %}
        {% if params.allowMultiple == true %}data-allow-multiple="true"{% endif %}
        {% if params.autosuggestData %}data-autosuggest-data="{{ params.autosuggestData }}"{% endif %}
        {% if params.errorTitle %}data-error-title="{{ params.errorTitle }}"{% endif %}
        {% if params.errorMessageEnter %}data-error-enter="{{ params.errorMessageEnter }}"{% endif %}
        {% if params.errorMessageSelect %}data-error-select="{{ params.errorMessageSelect }}"{% endif %}
        {% if params.ariaGroupedResults %}data-aria-grouped-results="{{ params.ariaGroupedResults }}"{% endif %}
        {% if params.groupCount %}data-group-count="{{ params.groupCount }}"{% endif %}
        {% if params.tooManyResults %}data-too-many-results="{{ params.tooManyResults }}"{% endif %}
        {% if params.errorMessageApi %}data-error-api="{{ params.errorMessageApi }}"{% endif %}
        {% if params.errorMessageApiLinkText %}data-error-api-link-text="{{ params.errorMessageApiLinkText }}"{% endif %}
        {% if params.language %}data-lang="{{ params.language }}"{% endif %}
        {% if params.options %}
            {% if params.options.oneYearAgo %}data-options-one-year-ago="true"{% endif %}
            {% if params.options.regionCode %}data-options-region-code="{{ params.options.regionCode }}"{% endif %}
            {% if params.options.addressType %}data-options-address-type="{{ params.options.addressType }}"{% endif %}
        {% endif %}
    >
        {% set autosuggestResults %}
            <div
                class="ons-autosuggest__results ons-js-autosuggest-results{% if params.input.width %}{{ ' ' }}ons-input--w-{{ params.input.width }}{% else %}{{ ' ' }}ons-input--w-20{% endif %}"
            >
                <div id="{{ params.resultsTitleId }}" class="ons-autosuggest__results-title ons-u-fs-s">{{ params.resultsTitle }}</div>
                <ul
                    class="ons-autosuggest__listbox ons-js-autosuggest-listbox"
                    title="{{ params.resultsTitle }}"
                    role="listbox"
                    id="{{ params.id }}-listbox"
                    tabindex="-1"
                ></ul>
            </div>
            <div
                class="ons-autosuggest__instructions ons-u-vh ons-js-autosuggest-instructions"
                id="{{ params.id }}-instructions"
                tabindex="-1"
            >
                {{ params.instructions }}
            </div>
            <div
                class="ons-autosuggest__status ons-u-vh ons-js-autosuggest-aria-status"
                aria-live="assertive"
                aria-atomic="true"
                role="status"
                tabindex="-1"
            ></div>
        {% endset %}

        {{
            onsInput({
                "id": params.id,
                "type": params.input.type,
                "classes": "ons-js-autosuggest-input" + (" " + params.input.classes if params.input.classes else ""),
                "width": params.input.width,
                "label": params.input.label,
                "autocomplete": params.input.autocomplete,
                "legend": params.input.legend,
                "legendClasses": params.input.legendClasses,
                "legendIsQuestionTitle": params.input.legendIsQuestionTitle,
                "value": params.input.value,
                "attributes": params.input.attributes,
                "error": params.input.error,
                "mutuallyExclusive": params.input.mutuallyExclusive,
                "accessiblePlaceholder": params.input.accessiblePlaceholder,
                "name": params.input.name,
                "autosuggestResults": autosuggestResults,
                "minLength": params.input.minLength,
                "maxLength": params.input.maxLength,
                "prefix": params.input.prefix,
                "suffix": params.input.suffix,
                "fieldId": params.input.fieldId,
                "fieldClasses": params.input.fieldClasses,
                "dontWrap": params.input.dontWrap,
                "charCheckLimit": params.input.charCheckLimit,
                "searchButton": params.input.searchButton,
                "postTextboxLinkText": params.input.postTextboxLinkText,
                "postTextboxLinkUrl": params.input.postTextboxLinkUrl,
                "listeners": params.input.listeners
            })
        }}

        {% if not params.mutuallyExclusive %}
            {{ autosuggestResults | safe }}
        {% endif %}
    </div>
{% endmacro %}