{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{% from "govuk/components/hint/macro.njk" import govukHint %}
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}
{% from "../question-format-hint/macro.njk" import digitalmarketplaceQuestionFormatHint %}

{% set name = params.question.id %}
{% set questionText = params.question.question + " (" + (params.question.optional_text if params.question.optional_text else "optional") + ")" if params.question.optional else params.question.question %}
{% set errorMessage = params.errors[name] %}
{% set values = params.data[name] or [] %}

<div class="govuk-form-group {%- if errorMessage %} govuk-form-group--error{% endif %}">
  {% call govukFieldset({
    legend: {
      html: questionText,
      classes: "govuk-fieldset__legend--m"
    },
    classes: 'dm-checkbox-tree',
    attributes: {
      'data-module': 'dm-question-checkbox-tree',
      'aria-describedby': "input-" + name if errorMessage,
      'data-item-name-singular': params.question.item_name.singular if params.question.item_name else "category",
      'data-item-name-plural': params.question.item_name.plural if params.question.item_name else "categories"
    }
  }) %}
    {% if params.question.hint or params.question.question_advice %}
      {{ govukHint({
        html: digitalmarketplaceQuestionFormatHint(params.question)
      }) }}
    {% endif %}

    {% if errorMessage %}
      {{ govukErrorMessage({
        text: errorMessage["message"],
        id: "input-" + name
      }) }}
    {% endif %}

    <div class="govuk-grid-row">
      <div class="dm-checkbox-tree__summary govuk-grid-column-one-third">
        {% if params.question.number_of_items %}
          <p class="govuk-body">
            You can choose up to {{ params.question.number_of_items }} {{ params.question.item_name.plural if params.question.item_name else "categories" }}.
          </p>
        {% endif %}
        <p class="dm-checkbox-tree__summary-total govuk-body">
          <strong class="dm-checkbox-tree__summary-total-selected"></strong>
          <span class="dm-checkbox-tree__summary-total-selected-text"></span>
        </p>
      </div>
      <div class="dm-checkbox-tree__options govuk-grid-column-two-thirds">
        {% if params.question.options[0].options %}
          {% set accordionItems = [] %}

          {% for option in params.question.options %}
            {% set checkboxItems = [] %}

            {% for label in option.options %}
              {% set _checkboxItems = checkboxItems.push({
                text: label.label,
                value: label.label,
                checked: label.label in values
              }) %}
            {% endfor %}
            
            {% set summaryHtml %}
              {{ option.options | length }} {{ params.question.item_name.plural if params.question.item_name else "categories" }}<span class="dm-checkbox-tree__options-number-selected"></span>
            {% endset %}

            {% set _accordionItems = accordionItems.push({
              heading: {
                text: option.label
              },
              summary: {
                html: summaryHtml
              },
              content: {
                html: govukCheckboxes({
                  name: name,
                  idPrefix: "input-" + name + '-' + loop.index | string,
                  items: checkboxItems
                })
              }
            }) %}
          {% endfor %}

          {{ govukAccordion({
            id: "accordion-" + name,
            items: accordionItems
          }) }}
        {% else %}
          {% set checkboxItems = []%}

          {% for option in params.question.options %}
            {% set _checkboxItems = checkboxItems.push({
              text: option.label,
              value: option.label,
              checked: option.label in values
            }) %}
          {% endfor %}

          {{ govukCheckboxes({
            name: name,
            idPrefix: "input-" + name,
            items: checkboxItems
          }) }}
        {% endif %}
      </div>
    </div>
  {% endcall %}
</div>