{% comment %}
  Renders product variant-picker

  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} Id of the product form to which the variant picker is associated.
  - update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
  Usage:
  {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
{%- unless product.has_only_default_variant -%}
  <variant-selects
    id="variant-selects-{{ section.id }}"
    class="no-js-hidden"
    data-section="{{ section.id }}"
    data-url="{{ product.url }}"
    {% if update_url == false %}
      data-update-url="false"
    {% endif %}
    {{ block.shopify_attributes }}
  >
    {%- for option in product.options_with_values -%}
      {%- liquid
        assign swatch_count = option.values | map: 'swatch' | compact | size
        assign picker_type = block.settings.picker_type

        if swatch_count > 0 and block.settings.swatch_shape != 'none'
          if block.settings.picker_type == 'dropdown'
            assign picker_type = 'swatch_dropdown'
          else
            assign picker_type = 'swatch'
          endif
        endif
      -%}

      {% comment %}
        SHX custom code
      {% endcomment %}

      {% liquid
        capture shx_current_page
          render "shx-get-current-page"
        endcapture
      %}
        
      {% if shx_current_page contains "texte" %}
        <style>
          /* Custom dropdown button styling */
          /*.shx-custom-variant-picker-dropdown {
            position: relative;
            display: inline-block;
          }
  
          .shx-custom-variant-picker-dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 10000;
            width: 100%;
            padding: 6px 0;
          }
  
          .shx-custom-variant-picker-dropdown-content div {
            color: black;
            padding: 2px 12px;
            text-decoration: none;
            display: flex;
            flex-direction: row;
            cursor: pointer;
            align-items: center;
          }
  
          .shx-custom-variant-picker-dropdown-content div:hover {
            background-color: #ededed;
          }
  
          .shx-custom-variant-picker-dropbtn {
            width: 100%;
            padding: 4px 14px 4px 24px;
            font-size: 16px;
            border: none;
            background-color: transparent;
            text-align: left;
            color: rgb(var(--color-foreground));
          }
  
          .shx-custom-variant-picker-dropbtn:focus {
            outline: none;
          }
  
          .shx-custom-variant-picker-dropdown-variant {
            display: flex;
            justify-content: center;          
          }
  
          .shx-custom-variant-picker-selected-variant {
            background-color: #e9e9e9;
          }

          .shx-custom-variant-picker-dummy-select {
            display: none;
          }*/
        </style>

        <legend class="form__label">{{ option.name }}</legend>

        <div class="shx-custom-enhanced-dropdown field">
          <select
            id="Option-{{ section.id }}-{{ forloop.index0 }}"
            class="shx-custom-enhanced-dropdown-hide-dummy-select shx-custom-enhanced-dropdown-variant-hide-dummy-select field__input"
            name="options[{{ option.name | escape }}]"
            form="{{ product_form_id }}"
          >
            {% for product_variant in product.variants %}
              <option value="{{ product_variant.title }}">{{ product_variant.title }}</option>
            {% endfor %}
          </select>

          <button class="shx-custom-enhanced-dropdown-button" id="shx-custom-enhanced-dropdown-variant-select-button">
            <div style="display: flex; justify-content: space-between; align-items: center; pointer-events: none">
              <span id="shx-custom-enhanced-dropdown-variant-select-selected-value" style="font-family: var(--font-heading-family)">{{ option.selected_value }}</span>
              
              <div style="display: flex; align-items: center; gap: 8px">
                {% for product_variant in product.variants %}
                  {% if option.selected_value == product_variant.title %}
                    <img id="shx-custom-enhanced-dropdown-variant-selected-image" src="{{ product_variant.featured_image.src | image_url }}" height="40" width="40" style="border-radius: 4px">
                  {% endif %}
                {% endfor %}

                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#131213"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
              </div>
            </div>
          </button>
          <div class="shx-custom-enhanced-dropdown-content" id="shx-custom-enhanced-dropdown-variant-dropdown-content">
            {% for product_variant in product.variants %}
              <div data-value="{{ product_variant.title }}" {% if option.selected_value == product_variant.title %}class="shx-custom-variant-picker-selected-variant"{% endif %}>
                <img src="{{ product_variant.featured_image.src | image_url }}" height="100" width="100" style="border-radius: 4px">

                <div style="display: flex; flex-direction: column; align-items: flex-start">
                  <span style="color: rgb(var(--color-foreground)); font-weight: 600; {% if product_variant.available == false %}text-decoration: line-through;{% endif %}">{{ product_variant.title }}</span>
                  <span>{{ product_variant.price | money }}</span>

                  {% if product_variant.title contains "Hintergrund" %}
                    <span>😃 Unterstützt Emojis + Leerzeichen</span>
                  {% endif %}
                </div>
              </div>
            {% endfor %}
          </div>
        </div>

        <script>
          const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-variant-hide-dummy-select');
          const dropdownContent = document.getElementById('shx-custom-enhanced-dropdown-variant-dropdown-content');
          const selectButton = document.getElementById('shx-custom-enhanced-dropdown-variant-select-button'); 
          const customSelectedValue = document.getElementById('shx-custom-enhanced-dropdown-variant-select-selected-value')
          
          selectButton.addEventListener('click', function() {
            dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
          });
        
          document.querySelectorAll('#shx-custom-enhanced-dropdown-variant-dropdown-content div').forEach(item => {
            item.addEventListener('click', event => {
              const selectedVariant = event.currentTarget.getAttribute('data-value');
              customSelectedValue.innerText = selectedVariant;
  
              // Set the selected option in the original select element
              selectElement.value = selectedVariant;
        
              // Trigger change event
              const eventChange = new Event('change', { bubbles: true });
              selectElement.dispatchEvent(eventChange);
        
              // Remove the selected style from all items
              document.querySelectorAll('#shx-custom-enhanced-dropdown-variant-dropdown-content div').forEach(div => {
                div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
              });
        
              // Add the selected style to the clicked item
              event.currentTarget.classList.add('shx-custom-enhanced-dropdown-variant-selected');
        
              dropdownContent.style.display = 'none';

              const currentTargetImage = event.currentTarget.querySelector("img")

              if (currentTargetImage !== null && currentTargetImage.src !== null) {
                document.getElementById("shx-custom-enhanced-dropdown-variant-selected-image").src = event.currentTarget.querySelector("img").src 
              }
            });
          });
        
          // Close the dropdown if the user clicks outside of it
          window.addEventListener('click', function(event) {
            if (!event.target.matches('#shx-custom-enhanced-dropdown-variant-select-button')) {
              if (dropdownContent.style.display === 'block') {
                dropdownContent.style.display = 'none';
              }
            }
          });

          window.addEventListener('load', function() {
            selectElement.value = customSelectedValue.innerText;
        
            // Trigger change event
            const eventChange = new Event('change', { bubbles: true });
            selectElement.dispatchEvent(eventChange);
          });
        </script>
      {% else %}
        {% comment %}
          Theme default code
        {% endcomment %}
        {%- if picker_type == 'swatch' -%}
          <fieldset class="js product-form__input product-form__input--swatch">
            <legend class="form__label">
              {{ option.name }}:
              <span data-selected-swatch-value="{{ option.name }}">
                {{- option.selected_value -}}
              </span>
            </legend>
            {% render 'product-variant-options',
              product: product,
              option: option,
              block: block,
              picker_type: picker_type
            %}
          </fieldset>
        {%- elsif picker_type == 'button' -%}
          <fieldset class="js product-form__input product-form__input--pill">
            <legend class="form__label">{{ option.name }}</legend>
            {% render 'product-variant-options',
              product: product,
              option: option,
              block: block,
              picker_type: picker_type
            %}
          </fieldset>
        {%- else -%}
          <div class="product-form__input product-form__input--dropdown">
            <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
              {{ option.name }}
            </label>
            <div class="select">
              {%- if picker_type == 'swatch_dropdown' -%}
                <span
                  data-selected-dropdown-swatch="options[{{ option.name | escape }}]"
                  class="dropdown-swatch"
                >
                  {% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %}
                </span>
              {%- endif -%}
              <select
                id="Option-{{ section.id }}-{{ forloop.index0 }}"
                class="select__select"
                name="options[{{ option.name | escape }}]"
                form="{{ product_form_id }}"
              >
                {% render 'product-variant-options',
                  product: product,
                  option: option,
                  block: block,
                  picker_type: picker_type
                %}
              </select>
              {% render 'icon-caret' %}
            </div>
          </div>
        {% endif %}
      {% endif %}
    {%- endfor -%}
    <script type="application/json">
      {{ product.variants | json }}
    </script>
  </variant-selects>
{%- endunless -%}

<noscript class="product-form__noscript-wrapper-{{ section.id }}">
  <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
    <label class="form__label" for="Variants-{{ section.id }}">
      {{- 'products.product.product_variants' | t -}}
    </label>
    <div class="select">
      <select
        name="id"
        id="Variants-{{ section.id }}"
        class="select__select"
        form="{{ product_form_id }}"
      >
        {%- for variant in product.variants -%}
          <option
            {% if variant == product.selected_or_first_available_variant %}
              selected="selected"
            {% endif %}
            {% if variant.available == false %}
              disabled
            {% endif %}
            value="{{ variant.id }}"
          >
            {%- liquid
              echo variant.title
              echo variant.price | money | strip_html | prepend: ' - '
              if variant.available == false
                echo 'products.product.sold_out' | t | prepend: ' - '
              endif
              if variant.quantity_rule.increment > 1
                echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
              endif
              if variant.quantity_rule.min > 1
                echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
              endif
              if variant.quantity_rule.max != null
                echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
              endif
              # TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
              # theme-check-disable
              assign cart_quantity = cart | item_count_for_variant: variant.id
              # theme-check-enable
              if cart_quantity > 0
                echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
              endif
            -%}
          </option>
        {%- endfor -%}
      </select>
      {% render 'icon-caret' %}
    </div>
  </div>
</noscript>