{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
{% from '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.njk' import ArticleBodyImage %}
{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}

{% macro Factbox(params) %}
  {% set componentClassName = "ds-factbox" %}
  {% set classNamePrefix = componentClassName + "--" %}
  {% set attributes = getAttributes(params.attributes) %}

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

  <div class="{{ classes }}" {{- attributes | safe }}>
    <div class="{{ componentClassName + '__inner'}}">
      <div class="{{ componentClassName + '__content'}}">
        {% if params.titleImageHtml %}
          <div class="{{ componentClassName + '__title-image'}}">
            {{ params.titleImageHtml | safe }}
          </div>
        {% endif %}
        {% if params.title or params.titleHighlight %}
          <h2 class="{{ componentClassName + '__title'}}">
            {%- if params.titleHighlight %}<span class="{{ componentClassName + '__title-highlight'}}">{{ params.titleHighlight }}</span>{%- endif %}
            {{- params.title -}}
          </h2>
        {% endif %}
        {% if params.bodyParts.length %}
          <div class="{{ componentClassName + '__body'}}">
            {% for part in params.bodyParts %}
              {% if part.type == "paragraph" %}
                {{ part.bodyHtml | safe }}
              {% elif part.type == "gradeMeter" %}
                {{ GetGrade({ grade: part.grade, type: "scale" }) | safe }}
              {% elif part.type == "image" %}
                {{ ArticleBodyImage({
                  imageHtml: part.mediaHtml | safe,
                  fullWidth: false,
                  imageType: part.imageType,
                  caption: part.caption if part.caption else "",
                  author: part.author if part.author else ""
                }) }}
              {% endif %}
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
{% endmacro %}