{% 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 TextButtonToggle(params) %}
  {% set componentClassName = "ds-text-btn-toggle" %}
  {% set classNamePrefix = componentClassName + "--" %}
  {%- set classes = [
    componentClassName,
    "ds-force-px" if params.forcePx,
    "ds-loading" if params.loading,
    classNamePrefix + "selected" if params.selected,
    params.classNames if params.classNames
  ] | join(" ") %}

  {%- set attributes = getAttributes(params.attributes) %}
  {%- set ariaLabel = 'aria-label="' + params.text + '"' if not params.attributes["aria-label"] else "" %}

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

  <button type="{{ params.type | default('button') }}" role="switch" {{ ariaLabel | safe }} aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
    <span class="{{ componentClassName + '__off' }}" aria-hidden="true">
      {{ IconUse({ icon: params.iconName }) }} <span class="{{ componentClassName + '__text'}}">{{ params.text }}</span>
    </span>
    <span class="{{ componentClassName + '__on' }}" aria-hidden="true">
      {{ IconUse({ icon: params.selectedIconName }) }} <span class="{{ componentClassName + '__text' }}">{{ params.selectedText }}</span>
    </span>
    {{ loadingHtml | safe }}
  </button>
{% endmacro %}