{% liquid
  
  assign section_name = 'FAQ List'
  assign el_id = section_name | handle | append: '-' | append: section.id

  assign section_padding = section.settings.padding
  assign padding_class = 'sp-' | append: section_padding
  if section.settings.top_half_padding
    assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
  endif
  if section.settings.bottom_half_padding
    assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
  endif

%}

<style>

  #{{ el_id }} nav ul li:not(:last-child) {
    margin-bottom: 12px;
  }

  #{{ el_id }} nav ul li:not(.active) a {
    opacity: 0.5;
    transition: opacity .3s linear;
  }

  #{{ el_id }} nav ul li a:hover {
    opacity: 1;
  }

  #{{ el_id }} li:not(:last-child) .accordion {
    border-bottom: 1px solid #CBCABF;
  }

  #{{ el_id }} li:last-child .accordion {
    margin: 0;
    padding: 0;
  }

</style>

{% for block in section.blocks %}
  {% assign titles = titles | append: "," | append: block.settings.title %}
{% endfor %}
{% assign categories = titles | remove_first: "," | split: "," | uniq %}
{% for category in categories %}
  {% assign handleized_category = category | handle %}
  {% assign values = values | append: "," | append: handleized_category %}
{% endfor %}
{% assign category_values = values | remove_first: "," | split: "," %}

<div id="{{ el_id }}">
  {% assign select_id = el_id | append: "-category-select" %}
  {% assign default_category = categories | first %}
  {% assign default_category_value = category_values | first %}
  {%- render 'global-select',
    global_select_class: "show-m hide-d sticky sticky-below-header zi-1",
    default_value: default_category_value,
    default_text: default_category,
    values: categories,
    option_values: category_values,
    id: select_id,
    selected_text_class: 'p3',
    list_option_class: 'p3',
    vue_model: 'active'
  -%}
  <div class="container {{ padding_class }}">
    <div class="row flex">
      <div class="col-4 hide-m show-d relative">
        <nav class="sticky sticky-below-header">
          <ul>
            {% for category in categories %}
              <li :class="{ active: active === '{{ category | handle }}'}">
                <a @click="goto('{{ category | handle }}')" class="p3">{{ category }}</a>
              </li>
            {% endfor %}
          </ul>
        </nav>
      </div>
      <div class="col-12 col-d-8">
        <div class="flex flex-column rowgap-60 d-rowgap-80 w-full d-max-650">
          {% for category in categories %}
            <div id="{{ category | handle }}">
              <h5 class="h5">{{ category }}</h5>
              <ul class="mt-25">
                {% for block in section.blocks %}
                  {% if block.settings.title == category %}
                    <li>
                      {% render 'accordion',
                        wrapper_class: "pb-20 mb-20",
                        title_padding_class: "pt-0 pb-0",
                        title_class: "p3 bold-500",
                        title: block.settings.question,
                        desc_html: block.settings.answer,
                        desc_no_pt: true,
                        desc_class: "p3 mt-15 mb-0 d-mb-10"
                      %}
                    </li>
                  {% endif %}
                {% endfor %}
              </ul>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<script>

  Vue.createApp({
    delimiters: ['${', '}'],
    data() {
      return {
        active: "{{ default_category | handle }}",
        isDesktop: window.screen.width >= 1024,
      }
    },
    mounted() {
      addEventListener('resize', () => {
        this.isDesktop = window.screen.width >= 1024;
      });

      if (this.isDesktop) {
        const $el = document.getElementById('{{ el_id }}')
        const $container = $el.querySelector('.container')
        const container_styles = window.getComputedStyle($container)
        const container_padding_top = container_styles.getPropertyValue('padding-top');
        const $nav = $el.querySelector('nav')
        const spacing = Number(container_padding_top.replace('px', ''))
        $nav.style.marginTop = '-' + spacing + 'px';
        $nav.style.paddingTop = spacing + 'px';
      }
    },
    methods: {
      goto(category) {
        this.active = category;
      }
    },
    watch: {
      active: function(cur) {
        $360.scrollTo(`#${cur}`)
      } 
    }
  }).mount("#{{ el_id }}")

</script>

{% schema %}
{
  "name": "FAQ List",
  "settings": [
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "select",
      "id": "padding",
      "label": "Padding",
      "options": [
        { "value": "no", "label": "No" },
        { "value": "sm", "label": "Small" },
        { "value": "md", "label": "Med" },
        { "value": "lg", "label": "Large" }
      ],
      "default": "md"
    },
    {
      "type": "checkbox",
      "id": "top_half_padding",
      "label": "Top Half Padding",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "bottom_half_padding",
      "label": "Bottom Half Padding",
      "default": false
    },
  ],
  "blocks": [
    {
      "name": "Question Item",
      "type": "item",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "info": "All questions item will be grouped by this title"
        },
        {
          "type": "text",
          "id": "question",
          "label": "Question"
        },
        {
          "type": "textarea",
          "id": "answer",
          "label": "Answer"
        }
      ]
    }
  ],
  "presets": [
    {
			"name": "FAQ List",
      "blocks": []
	  }
  ]
}
{% endschema %}