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

{% macro ListItem(params) %}
  {% set componentClassName = "ds-list-item" %}
  <li class="{{ componentClassName }}{% if params.border %} {{componentClassName}}--border{% endif %}">
    {% call ListItemInner(params, componentClassName) %}
      {% set componentClassName = componentClassName %}
      {% if iconLeftSvg %}
        <div class="{{ componentClassName + '__icon-left'}}">{{- iconLeftSvg | safe -}}</div>
      {% endif %}
      {% if params.listItemType == 'image' %}
        <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml | safe }}</div>
      {% endif %}
      {% if params.listItemType == 'byline' and params.mediaHtml %}
        <div class="{{ componentClassName + '__portrait'}}">{{ params.mediaHtml | safe }}</div>
      {% endif %}
      {% if params.title %}
        {% set titleClasses = [componentClassName + '__title', componentClassName + '__title--' + (params.fontWeight or 'regular')] | join(" ") %}
        <div class="{{ componentClassName + '__titles'}}">
          {% if params.titleHref and not params.disabled %}
            {% set linkAttributes = getAttributes(params.linkAttributes) %}
            <a class="{{ titleClasses }}" href="{{ params.titleHref }}" {{ linkAttributes | safe }}>{{ params.title }}</a>
          {% else %}
            <span class="{{ titleClasses }}">{{ params.title }}</span>
          {% endif %}
          {%- if params.subtitle %}
            <span class="{{ componentClassName + '__subtitle'}}">{{ params.subtitle }}</span>
          {% endif %}
        </div>
      {% endif %}
      {% if params.meta %}
        <span class="{{ componentClassName + '__meta'}}">{{ params.meta }}</span>
      {% endif %}
      {% if iconRightSvg %}
        <div class="{{ componentClassName + '__icon-right'}}">{{- iconRightSvg | safe -}}</div>
      {% endif %}
      {% if elementRight %}
        {{- elementRight | safe -}}
      {% endif %}
    {% endcall %}
  </li>
{% endmacro %}

{# Internal helper macro - not intended for use outside of this file #}
{% macro ListItemInner(params, componentClassName) %}
  {% set classNamePrefix = componentClassName + "--" %}
  {% set attributes = getAttributes(params.attributes) %}

  {% if params.listItemType == "standard" or params.listItemType == "image" or not params.listItemType %}
    {% set element = "link" if params.href and not params.disabled else "button"  %}
    {% set variantClass = classNamePrefix + "standard" %}
  {% else %}
    {% set element = params.listItemType %}
    {% set variantClass = classNamePrefix + params.listItemType %}
  {% endif %}

  {% if params.leadingIcon and params.listItemType != "image" %}
    {% set iconLeftSvg = IconUse({ icon: params.leadingIcon }) %}
  {% endif %}

  {% if params.trailingIcon %}
    {% set iconRightSvg = IconUse({ icon: params.trailingIcon }) %}
  {% endif %}

  {%- set classes = [
    componentClassName + "__content",
    "ds-force-px" if params.forcePx,
    classNamePrefix + "disabled" if params.disabled,
    variantClass,
    params.classNames if params.classNames
  ] | join(" ") %}

  {% if element == 'link' %}
    <a class="{{ classes }}" {{- attributes | safe }} href="{{ params.href }}">
      {{ caller() if caller }}
    </a>
  {% elif element == 'button' %}
    <button class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
      {{ caller() if caller }}
    </button>
  {% elif element == 'checkbox' %}
    <label class="{{ classes }}" for="{{ params.name }}" {{- attributes | safe }}>
      {% set iconLeftSvg %}
        {{ Checkbox({
          name: params.name,
          checked: params.checked,
          condensed: true,
          disabled: params.disabled,
          forcePx: params.forcePx,
          stripLabel: true,
          attributes: params.elementAttributes,
          classNames: params.elementClassNames
        })}}
      {% endset %}
      {{ caller() if caller }}
    </label>
  {% elif element == 'switch' %}
    <label class="{{ classes }}" for="{{ params.name }}" {{- attributes | safe }} >
      {% set iconRightSvg %}
        {{ Switch({
          name: params.name,
          meta: true,
          checked: params.selected,
          condensed: true,
          disabled: params.disabled,
          forcePx: params.forcePx,
          stripLabel: true,
          attributes: params.elementAttributes,
          classNames: params.elementClassNames
        })}}
      {% endset %}
      {{ caller() if caller }}
    </label>
  {% elif element == 'accordion' %}
    {% set iconRightSvg %}
      {{ IconUse({ icon: "expand_less" }) }}
      {{ IconUse({ icon: "expand_more" }) }}
    {% endset %}
    <button class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
      {{ caller() if caller }}
    </button>
    <div class="{{ componentClassName + '__accordion-inner'}}">
      {{ params.accordionContent | safe }}
    </div>
  {% elif element == 'toggle' %}
    <div class="{{ classes }}" {{- attributes | safe }}>
      {% set elementRight %}
        {{ ButtonToggle({
          text: params.toggleText,
          selected: params.selected,
          selectedText: params.toggleSelectedText,
          variant: params.variant | default("secondaryFilled"),
          disabled: params.disabled,
          forcePx: params.forcePx,
          size: "sm",
          attributes: params.elementAttributes,
          classNames: params.elementClassNames
        })}}
      {% endset %}
      {{ caller() if caller }}
    </div>
  {% elif element == 'byline' %}
    {% set elementRight %}
      {% if params.toggleText %}
        {{ ButtonToggle({
          text: params.toggleText,
          selected: params.selected,
          selectedText: params.toggleSelectedText,
          variant: params.variant | default("secondaryFilled"),
          disabled: params.disabled,
          forcePx: params.forcePx,
          size: "sm",
          attributes: params.elementAttributes,
          classNames: params.elementClassNames
        })}}
      {% endif %}
    {% endset %}
    {% if params.href %}
      {% set linkAttributes = getAttributes(params.linkAttributes) %}
      <a href="{{ params.href }}" class="{{ classes }}" {{- attributes | safe }} {{- linkAttributes | safe }}>
        {{ caller() if caller }}
      </a>
    {% else %}
      <div class="{{ classes }}" {{- attributes | safe }}>
        {{ caller() if caller }}
      </div>
    {% endif %}
  {% else %}
    <div class="{{ classes }}" {{- attributes | safe }}>
      {{ caller() if caller }}
    </div>
  {% endif %}
{% endmacro %}