

{% liquid
  assign block_settings = block.settings
  assign menu = block_settings.menu
  assign heading = block_settings.heading
  assign color_scheme = block_settings.color_scheme
  assign show_as_accordion = block_settings.show_as_accordion
  if show_as_accordion == true and block_settings.accordion_dividers == true
    assign dividers_enabled = true
  endif
%}

{% if menu != blank or heading != blank %}
  {%- liquid
    assign menu_class = 'menu'
    if show_as_accordion == true
      assign menu_class = menu_class | append: ' menu--accordion'
    endif
    if dividers_enabled == true
      assign menu_class = menu_class | append: ' menu--dividers'
    endif
    assign should_disable_on_mobile = false
    assign should_open_by_default_on_mobile = false
    if show_as_accordion == false
      assign should_disable_on_mobile = true
      assign should_open_by_default_on_mobile = true
    endif
  -%}
  {% capture menu_accordion_children %}
    <details
      class="
        menu__details
        spacing-style
        {% if block_settings.inherit_color_scheme == false %} color-{{ color_scheme }}{% endif %}
      "
      data-testid="menu-details"
      style="
        --spacing--size: {{ block_settings.menu_spacing }}px;
        {% render 'spacing-style', settings: block_settings %}
      "
      {% if show_as_accordion == false %}
        open
      {% endif %}
      {{ block.shopify_attributes }}
    >
      <summary class="menu__heading{% if heading == blank and menu.title == blank %} menu__heading--empty{% endif %} {{ block_settings.heading_preset }}">
        <span class="menu__heading__default">{{ heading | default: menu.title }}</span>
        <span class="menu__heading__accordion">
          {{ heading | default: menu.title }}
          {% if block_settings.accordion_icon == 'plus' %}
            <span class="menu__heading__toggle svg-wrapper icon-plus">
              {{- 'icon-plus.svg' | inline_asset_content -}}
            </span>
          {% else %}
            <span class="menu__heading__toggle svg-wrapper icon-caret icon-animated">
              {{- 'icon-caret.svg' | inline_asset_content -}}
            </span>
          {% endif %}
        </span>
      </summary>

      <nav
        class="details-content"
        {% if heading == blank %}
          aria-label="{{ menu.title | escape }}"
        {% endif %}
      >
        {% if menu %}
          <ul class="list-unstyled">
            {% for link in menu.links %}
              <li class="menu__item {{ block_settings.link_preset }}">
                <a href="{{ link.url }}">
                  {{ link.title }}
                </a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </nav>
    </details>
  {% endcapture %}
  {% render 'accordion-custom-component',
    children: menu_accordion_children,
    class: menu_class,
    disable_on_desktop: true,
    open_by_default_on_desktop: true,
    disable_on_mobile: should_disable_on_mobile,
    open_by_default_on_mobile: should_open_by_default_on_mobile
  %}
{% endif %}

{% stylesheet %}
  .menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "t:names.menu",
  "tag": null,
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "t:settings.menu",
      "default": "main-menu"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "t:settings.heading"
    },
    {
      "type": "header",
      "content": "t:content.appearance"
    },
    {
      "type": "range",
      "id": "menu_spacing",
      "label": "t:settings.vertical_gap",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "checkbox",
      "id": "show_as_accordion",
      "label": "t:settings.show_as_accordion",
      "default": false
    },
    {
      "type": "select",
      "id": "accordion_icon",
      "label": "t:settings.icon",
      "options": [
        {
          "value": "caret",
          "label": "t:options.caret"
        },
        {
          "value": "plus",
          "label": "t:options.plus"
        }
      ],
      "default": "caret",
      "visible_if": "{{ block.settings.show_as_accordion == true }}"
    },
    {
      "type": "checkbox",
      "id": "accordion_dividers",
      "label": "t:settings.dividers",
      "default": false,
      "visible_if": "{{ block.settings.show_as_accordion == true }}"
    },
    {
      "type": "checkbox",
      "id": "inherit_color_scheme",
      "label": "t:settings.inherit_color_scheme",
      "default": true
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:settings.color_scheme",
      "default": "scheme-1",
      "visible_if": "{{ block.settings.inherit_color_scheme == false }}"
    },
    {
      "type": "header",
      "content": "t:content.typography"
    },
    {
      "type": "select",
      "id": "heading_preset",
      "label": "t:settings.heading_preset",
      "options": [
        {
          "value": "",
          "label": "t:options.default"
        },
        {
          "value": "paragraph",
          "label": "t:options.paragraph"
        },
        {
          "value": "h1",
          "label": "t:options.h1"
        },
        {
          "value": "h2",
          "label": "t:options.h2"
        },
        {
          "value": "h3",
          "label": "t:options.h3"
        },
        {
          "value": "h4",
          "label": "t:options.h4"
        },
        {
          "value": "h5",
          "label": "t:options.h5"
        },
        {
          "value": "h6",
          "label": "t:options.h6"
        }
      ],
      "default": "h3"
    },
    {
      "type": "select",
      "id": "link_preset",
      "label": "t:settings.link_preset",
      "options": [
        {
          "value": "",
          "label": "t:options.default"
        },
        {
          "value": "paragraph",
          "label": "t:options.paragraph"
        },
        {
          "value": "h1",
          "label": "t:options.h1"
        },
        {
          "value": "h2",
          "label": "t:options.h2"
        },
        {
          "value": "h3",
          "label": "t:options.h3"
        },
        {
          "value": "h4",
          "label": "t:options.h4"
        },
        {
          "value": "h5",
          "label": "t:options.h5"
        },
        {
          "value": "h6",
          "label": "t:options.h6"
        }
      ],
      "default": "paragraph"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-start",
      "label": "t:settings.left",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-end",
      "label": "t:settings.right",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "t:names.menu",
      "category": "t:categories.links"
    }
  ]
}
{% endschema %}
