{% 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 Modal(params) %}
  {% set componentClassName = "ds-modal" %}

  {%- set classes = [
    componentClassName,
    componentClassName + "--sheet" if params.modalType === "sheet",
    "ds-force-px" if params.forcePx,
    "ds-modal--hidden",
    params.classNames if params.classNames
  ] | join(" ") %}
  {% set attributes = getAttributes(params.attributes) %}

  <div class="{{ classes }}">
    <dialog class="{{ componentClassName + '__inner' }}" {{- attributes | safe }}>
      <div class="{{ componentClassName + '__content' }}">
        {% if params.modalType !== "sheet" %}
          {{ Button({
            variant: "transparent",
            size: "sm",
            iconName: "close",
            isIconButton: true,
            attributes: {
              "aria-label": "stäng"
            },
            classNames: "ds-modal__close ds-modal__close--icon"
          })}}
        {% endif %}

        {% if params.title %}
          <h2>{{ params.title }}</h2>
        {% endif %}

        {{ caller() if caller }}

        {% if params.primaryButton or params.secondaryButton %}
          <div class="ds-modal__buttons">
            {% if params.secondaryButton %}
              {%- set secondaryButtonClasses = ["ds-modal__secondary-button",
                "ds-modal__close" if params.secondaryButton.isCloseButton,
                params.secondaryButton.classNames if params.secondaryButton.classNames
              ] | join(" ") %}
              {{ Button({
                text: params.secondaryButton.text,
                variant: "secondaryOutline",
                href: params.secondaryButton.href,
                classNames: secondaryButtonClasses,
                attributes: params.secondaryButton.attributes,
                forcePx: params.forcePx,
                mobile: {
                  fullWidth: true
                }
              })}}
            {% endif %}

            {% if params.primaryButton %}
            {%- set primaryButtonClasses = ["ds-modal__primary-button",
              params.primaryButton.classNames if params.primaryButton.classNames
          ] | join(" ") %}
              {{ Button({
                text: params.primaryButton.text,
                variant: "primaryBlack",
                href: params.primaryButton.href,
                classNames: primaryButtonClasses,
                attributes: params.primaryButton.attributes,
                forcePx: params.forcePx,
                mobile: {
                  fullWidth: true
                }
              })}}
            {% endif %}
          </div>
        {% endif %}
      </div>
    </dialog>
  </div>
{% endmacro %}