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

{% macro BuddyMenu(params) %}
  {% set componentClassName = "ds-buddy-menu" %}
  {% set classNamePrefix = componentClassName + "--" %}
  {%- set attributes = getAttributes(params.attributes) %}

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

  <div class="{{ classes }} {{ 'ds-buddy-menu--skola' if params.isDnSkola }}" {{- attributes | safe}}>
    <div class="{{ componentClassName + '__inner'}}">
      <div class="ds-buddy-menu__scrollable-container">
        <div class="ds-buddy-menu__content">
          {{ Button({
            variant: "transparent",
            size: "sm",
            iconName: "close",
            attributes: {
              "aria-label": "stäng"
            },
            classNames: "ds-buddy-menu__close",
            forcePx: params.forcePx,
            isIconButton: true
          })}}

          <div class="ds-buddy-menu__header">
            <span class="ds-buddy-menu__greeting">Hej <span class="ds-buddy-menu__name js-buddy-menu-name" data-name-type="given">{{ params.userName }}</span>!</span>
            {%- if not params.isDnSkola %}
              <div class="ds-buddy-menu__account">
                <h2 class="ds-buddy-menu__account-title">Min prenumeration</h2>
                <span class="ds-buddy-menu__account-level js-buddy-menu__account-level">{{ params.accountLevel }}</span>

                {% if params.addons %}
                  <div class="ds-buddy-menu__addons {{ params.addonClassNames }}">
                    <h2 class="ds-buddy-menu__addons-title">Mina tillägg</h2>
                    <ul class="ds-buddy-menu__addons-list">
                      {% for addon in params.addons %}
                        <li class="{{ addon.classNames }}"><a href="{{ addon.href }}">{{ addon.title }}</a></li>
                      {% endfor %}
                    </ul>
                  </div>
                {% endif %}

                {{ Button({
                  text: "Mitt konto",
                  variant: "primaryBlack",
                  fullWidth: true,
                  href: params.myAccountUrl | default("#"),
                  attributes: { "data-hide-promo" : "" },
                  forcePx: params.forcePx
                })}}
              </div>
            {% endif %}
          </div>

          <div class="ds-buddy-menu__links">
            <h2 class="ds-buddy-menu__links-title">Mitt innehåll</h2>
            <ul class="ds-buddy-menu__links-list">
              {{ params.links | safe }}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endmacro %}