{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}

{% macro GroupHeader(params) %}
  {% set componentClassName = "ds-group-header" %}
  {% set classNamePrefix = componentClassName + "--" %}
  {% set attributes = getAttributes(params.attributes) %}

  {%- set classes = [
    componentClassName,
    classNamePrefix + (params.type or "icon"),
    classNamePrefix + params.variant if params.variant,
    classNamePrefix + 'bottom-border' if params.showBottomBorder,
    'ds-dark' if params.variant == 'bauta',
    params.classNames if params.classNames
  ] | join(" ") %}

  {% set groupHeaderInner %}
    {% if params.mediaHtml %}
      <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml | safe }}</div>
    {% endif %}
    <h2 class="{{ componentClassName + '__title'}}">{{ params.title }}</h2>

    {% if params.type == 'link' and params.linkText and params.href %}
      <span class="{{ componentClassName + '__right-link' }}">
        {{ params.linkText }}
      </span>
    {% elif (params.type == 'icon' or not params.type) and params.href %}
      {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon' }) }}
    {% elif (params.type == 'arrows') and params.href and params.linkText %}
      <span class="{{ componentClassName + '__right-link' }} hidden-desktop">
        {{ params.linkText }}
      </span>
    {% elif (params.type == 'arrows') and params.href %}
      {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon hidden-desktop' }) }}
    {% endif %}
  {% endset %}

  <div class="{{ classes }}" {{ attributes | safe }}>
    {% if params.href %}
      <a class="{{ componentClassName + '__href'}}" href="{{ params.href }}">
        {{ groupHeaderInner | safe }}
      </a>
    {% else %}
      {{ groupHeaderInner | safe }}
    {% endif %}
    {# there is no static-white toggle btn so it is disabled for bauta for now #}
    {% if params.type == 'toggle' and not params.variant %}
      {{ ButtonToggle({
        variant: "primary",
        size: 'sm',
        text: params.toggleText,
        selectedText: params.toggleSelectedText,
        selected: params.toggleSelected,
        loading: params.toggleLoading,
        classNames: params.toggleClassNames,
        attributes: params.toggleAttributes
      }) }}
    {% elif (params.type == 'arrows') %}
      {%  set buttonVariant = "staticWhite" if params.variant else "secondaryOutline" %}
      <div class="{{ componentClassName + '__arrows' }} hidden-mobile hidden-tablet">
        {{ Button({
          variant: buttonVariant,
          size: "sm",
          isIconButton: true,
          iconName: "arrow_back",
          classNames: "ds-group-header__arrow ds-group-header__arrow--left",
          attributes: {"aria-label": "Föregående"}
        }) }}
        {{ Button({
          variant: buttonVariant,
          size: "sm",
          isIconButton: true,
          iconName: "arrow_forward",
          classNames: "ds-group-header__arrow ds-group-header__arrow--right",
          attributes: {"aria-label": "Nästa"}
        }) }}
      </div>
    {% endif %}
  </div>

{% endmacro %}