{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
{% from "govuk/components/hint/macro.njk" import govukHint %}
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{% macro LocationFieldBase(component, inputMode) %}
  {% set showFieldsetError = component.model.showFieldsetError | default(false) %}
  {% set hintId = component.model.name + "-hint" %}
  {% set errorId = component.model.name + "-error" %}
  {% set fieldsetDescribedBy = "" %}
  {% if component.model.hint %}
    {% set fieldsetDescribedBy = hintId %}
  {% endif %}
  {% if showFieldsetError and component.model.errorMessage %}
    {% set fieldsetDescribedBy = fieldsetDescribedBy + " " + errorId if fieldsetDescribedBy else errorId %}
  {% endif %}

  {% set fieldsetHtml %}
    {% if component.model.hint %}
      {{ govukHint({
        id: hintId,
        text: component.model.hint.text
      }) }}
    {% endif %}

    {% if showFieldsetError and component.model.errorMessage %}
      {{ govukErrorMessage({
        id: errorId,
        text: component.model.errorMessage.text,
        html: component.model.errorMessage.html,
        visuallyHiddenText: component.model.errorMessage.visuallyHiddenText
      }) }}
    {% endif %}

    <div class="govuk-grid-row app-location-field-inputs">
      {% for item in component.model.items %}
        <div class="govuk-grid-column-one-third">
          {% set inputParams = {
            id: item.id,
            name: item.name,
            label: {
              text: item.label
            },
            classes: item.classes,
            value: item.value,
            type: "text",
            inputmode: inputMode | default("text"),
            prefix: item.prefix,
            suffix: item.suffix
          } %}
          {% if item.errorMessage %}
            {% set inputParams = inputParams | merge({ errorMessage: item.errorMessage }) %}
          {% endif %}
          {{ govukInput(inputParams) }}
        </div>
      {% endfor %}
    </div>
  {% endset %}

  {% set detailsHtml %}
    {% if component.model.instructionText %}
      {{ govukDetails({
        summaryText: "How to find location details",
        html: component.model.instructionText | markdown | safe,
        classes: "govuk-!-margin-top-3"
      }) }}
    {% endif %}
  {% endset %}

  {% set hasErrors = showFieldsetError and component.model.errorMessage %}

  <div class="govuk-form-group app-location-field {{ "govuk-form-group--error" if hasErrors }}" data-locationtype="{{component.type | lower}}">
    {{ govukFieldset({
      legend: {
        text: component.model.fieldset.legend.text,
        classes: component.model.fieldset.legend.classes,
        isPageHeading: false
      },
      describedBy: fieldsetDescribedBy if fieldsetDescribedBy else undefined,
      html: fieldsetHtml
    }) }}
    {{ detailsHtml | safe }}
  </div>
{% endmacro %}