{% from "nhsuk/components/heading/macro.njk" import heading as nhsukHeading %}
{% from "nhsuk/components/tag/macro.njk" import tag as nhsukTag %}
{% from "nhsuk/macros/attributes.njk" import nhsukAttributes %}

{#- Set classes for this component #}
{%- set classNames = "nhsuk-task-list" -%}

{%- if params.classes %}
  {% set classNames = classNames ~ " " ~ params.classes %}
{% endif -%}

{%- set idPrefix = params.idPrefix if params.idPrefix else "task-list" -%}

{%- macro _taskListItem(params, item, index) %}
  {%- set hintId = idPrefix ~ "-" ~ index ~ "-hint" %}
  {%- set statusId = idPrefix ~ "-" ~ index ~ "-status" %}

  {#- Support item heading as string (with deprecated options) #}
  {%- set itemHeading = item.heading if item.heading is mapping and item.heading is not escaped else {
    text: item.heading if item.heading is string else item.title.text,
    html: item.heading if item.heading is escaped else item.title.html,
    classes: item.title.classes
  } %}

  {#- Support item hint as string #}
  {%- set itemHint = item.hint if item.hint is mapping and item.hint is not escaped else {
    text: item.hint if item.hint is string else undefined,
    html: item.hint if item.hint is escaped else undefined
  } %}

  {#- Support item status as string #}
  {%- set itemStatus = item.status if item.status is mapping and item.status is not escaped else {
    text: item.status if item.status is string else undefined,
    html: item.status if item.status is escaped else undefined
  } %}
  <li class="nhsuk-task-list__item {%- if item.href %} nhsuk-task-list__item--with-link{% endif %}{%- if item.classes %} {{ item.classes }}{% endif %}">
    <div class="nhsuk-task-list__name-and-hint">
      {{ nhsukHeading({
        id: itemHeading.id,
        text: itemHeading.text,
        html: itemHeading.html,
        visuallyHiddenText: itemHeading.visuallyHiddenText,
        className: "nhsuk-task-list__link" if item.href else "",
        classes: ("nhsuk-link" if item.href else "") ~ (itemHeading.classes if itemHeading.classes else ""),
        attributes: nhsukAttributes({
          href: {
            value: item.href | default(false),
            optional: true
          },
          "aria-describedby": {
            value: ((hintId ~ " " if itemHint.text or itemHint.html else "") ~ statusId) if item.href else false,
            optional: true
          }
        }) ~ nhsukAttributes(itemHeading.attributes),
        element: "a" if item.href else "div"
      }) | trim | indent(6) }}
    {% if itemHint.text or itemHint.html %}
      <div class="nhsuk-task-list__hint" id="{{ hintId }}">
      {% if itemHint.html %}
        {{ itemHint.html | safe | trim | indent(8) }}
      {% elif itemHint.text %}
        {{ itemHint.text | trim | indent(8) }}
      {% endif %}
      </div>
    {% endif %}
    </div>
    <div class="nhsuk-task-list__status {%- if itemStatus.classes %} {{ itemStatus.classes }}{% endif %}" id="{{ statusId }}">
    {% if itemStatus.tag %}
      {{ nhsukTag(itemStatus.tag) | trim | indent(6) }}
    {% elif itemStatus.html %}
      {{ itemStatus.html | safe | trim | indent(6) }}
    {% elif itemStatus.text %}
      {{ itemStatus.text | trim | indent(6) }}
    {% endif %}
    </div>
  </li>
{%- endmacro -%}

<ul class="{{ classNames }}" {%- if params.id %} id="{{ params.id }}"{% endif %}
  {{- nhsukAttributes(params.attributes) }}>
  {% for item in params.items %}
    {{- _taskListItem(params, item, loop.index) if item }}
  {% endfor %}
</ul>