{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
{% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}

{% macro InnerButton(params) %}
  {% if not params.isIconButton and params.attributes["aria-label"] %}
    <span aria-hidden="true">{{ params.text }}</span>
  {% elif not params.isIconButton %}
    <span>{{ params.text }}</span>
  {% endif %}
  {{- params.iconSvg | safe if params.iconSvg -}} {{ params.loadingHtml | safe }}
{% endmacro %}

{% macro ToggleWrapper(params) %}
  <button type="button" role="switch" {{ params.ariaLabel | safe }} aria-checked="{{ "true" if params.selected else "false" }}" class="{{ params.classes }}" {{ "disabled" if params.disabled }} {{- params.attributes | safe }}>
    {{ caller() }}
    {{ params.loadingHtml | safe }}
  </button>
{% endmacro %}

{% macro Button(params) %}
  {%- set componentClassName = "ds-btn" %}
  {%- set classNamePrefix = componentClassName + "--" %}
  {%- set text = params.text %}
  {%- set attributes = getAttributes(params.attributes) %}
  {%- set ariaLabel = 'aria-label="' + text + '"' if (params.isIconButton or params.isToggle) and params.text and not params.attributes["aria-label"] else "" %}
  {%- set buttonVariant = params.variant | default("primary") %}

  {% if params.variant == "staticWhite" or params.variant == "transparent" %}
      {%- set spinnerVariant = "staticBlack" %}
  {% elif params.variant == "secondaryFilled" or params.variant == "secondaryOutline" %}
    {%- set spinnerVariant = "primary" %}
  {% else %}
    {%- set spinnerVariant = "secondary" %}
  {% endif %}

  {%- set loadingHtml %}
    {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
  {% endset %}

  {%- if params.iconName and ((params.iconPosition and params.iconPosition != "none") or params.isIconButton == true) %}
    {% set iconSvg =  IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
  {% endif %}

  {%- set classes = [
    componentClassName,
    classNamePrefix + buttonVariant,
    classNamePrefix + "selected" if params.selected,
    classNamePrefix + params.size if params.size else classNamePrefix + "lg",
    classNamePrefix + "full-width" if params.fullWidth,
    classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullWidth,
    classNamePrefix + "icon-" + params.iconPosition if iconSvg and not params.isIconButton,
    classNamePrefix + "icon-only" if params.isIconButton,
    classNamePrefix + "toggle" if params.isToggle,
    classNamePrefix + "selected" if params.isToggle and params.selected,
    "ds-loading" if params.loading,
    "ds-force-px" if params.forcePx,
    params.classNames if params.classNames
  ] | join(" ") %}

  {%- if params.isToggle %}
    {% call ToggleWrapper({ ariaLabel: ariaLabel, selected: params.selected, classes: classes, attributes: attributes, disabled: params.disabled, loadingHtml: loadingHtml }) %}
      {%- if params.isIconButton %}
        <span class="ds-btn__off" aria-hidden="true">{{ IconUse({ icon: params.iconName }) }}</span>
        <span class="ds-btn__on"  aria-hidden="true">{{ IconUse({ icon: params.selectedIconName }) }}</span>
      {% else %}
        <span class="ds-btn__off" aria-hidden="true"><span>{{ params.text }}</span></span>
        <span class="ds-btn__on" aria-hidden="true">
          {{ IconUse({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
        </span>
      {% endif %}
    {% endcall %}
  {% else %}
    {% if params.href %}
      {% set loadingHtml = null %}
    {% endif %}
    {% set buttonParams = { isIconButton: params.isIconButton, text: text, iconSvg: iconSvg, loadingHtml: loadingHtml , attributes: params.attributes } %}
    {%- if params.href %}
      <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe }}>
        {{ InnerButton(buttonParams) }}
      </a>
    {% else %}
      <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
        {{ InnerButton(buttonParams) }}
      </button>
    {% endif %}
  {% endif %}
{% endmacro %}