
{%- liquid
  unless product
    assign product = section.settings.product
  endunless
  unless product.available
    continue
  endunless
  assign update_url = block.settings.enable_historystate
  unless section.id contains 'main-product'
    assign update_url = false
  endunless

  assign un_no_pick = true
  if settings.pick_mode == 'no' and product.variants.size > 1
    assign selected_variant = product.selected_variant
    assign update_url = false
    unless selected_variant
      assign un_no_pick = false
    endunless
  elsif settings.pick_mode == 'first' and settings.hide_sold_out == false
    assign selected_variant = product.selected_variant | default: product.variants.first
  else
    assign selected_variant = product.selected_or_first_available_variant
  endif

  assign product_form_id = 'product-form-'| append: section.id | append: product.id
-%}
<div class="hdt-product-info__item hdt-product__variant-picker hdt-w-full" data-type="{{ block.type }}" {{ block.shopify_attributes }}>
  {%- unless product.has_only_default_variant -%}
    {%- liquid
      #assign selected_variant = product.selected_or_first_available_variant
      assign variants_option2 = product.variants | where: 'option1', selected_variant.option1
      assign variants_option3 = product.variants | where: 'option1', selected_variant.option1 | where: 'option2', selected_variant.option2
      assign variants_option1_arr = product.variants | map: 'option1' | uniq
      assign variants_option2_arr = variants_option2 | map: 'option2' | uniq
      assign variants_option3_arr = variants_option3 | map: 'option3' | uniq
      assign variants_option1_available_arr = product.variants | where: 'available' | map: 'option1' | uniq
      assign variants_option2_available_arr = variants_option2 | where: 'available' | map: 'option2' | uniq
      assign variants_option3_available_arr = variants_option3 | where: 'available' | map: 'option3' | uniq
      if variants_option1_arr.size == 1 and variants_option2_arr.size == 1 or variants_option1_arr.size == 1 and variants_option3_arr.size == 1 or variants_option2_arr.size == 1 and variants_option3_arr.size == 1 or product.options_with_values.size == 1
        assign update_status = false
      else
        assign update_status = true
      endif
      if product.available and settings.hide_sold_out
        assign hide_sold_out = true
      else
        assign hide_sold_out = false
      endif
      assign color_list = 'products.theme_settings.color' | t | downcase | strip | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq
      assign size_list = 'products.theme_settings.size' | t | downcase | strip | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq
      assign use_size_chart_page = false
      assign use_size_chart_image = false
      assign show_dialog_size_chart = false
      if block.settings.size_chart_source == 'page' and block.settings.size_chart_page != blank
        assign use_size_chart_page = true
      elsif block.settings.size_chart_source == 'image' and block.settings.size_chart_image != blank
        assign use_size_chart_image = true
        assign image_size_chart = block.settings.size_chart_image
      endif
      assign choose_an_option = 'products.product.choose_an_option' | t
    -%}
    <hdt-variant-picker id="variant-picker-{{ section.id }}" handle="{{ product.handle }}" form="{{ product_form_id }}" selected-variant="{{ selected_variant.id }}" class="hdt-variant-picker no-js-hidden hdt-color-mode__{{ block.settings.color_picker_type }} hdt-color-size__{{ block.settings.color_size }} hdt-selector-mode__{{ block.settings.picker_type }}"{% if update_url %} update-url="{{ selected_variant.id | default: 19041994 }}"{% endif %}{% if update_status %} update-status{% endif %} data-size="{{ product.options_with_values.size }}"{% if hide_sold_out %} hide-sold-out-variants{% endif %}{% unless un_no_pick %} no-pick{% endunless %}>
      {%- for option in product.options_with_values -%}
        {%-  liquid
        assign name_downcase = option.name | downcase
        if color_list contains name_downcase
          assign option_type = 'color'
          assign color_option_index = 'option' | append: forloop.index
        elsif size_list contains name_downcase
          assign option_type = 'size'
        else
          assign option_type = 'other'
        endif
        if option_type != 'color' and block.settings.picker_type != 'dropdown'
          assign no_dropdown = true
        elsif option_type == 'color' and block.settings.color_picker_type != 'dropdown' and block.settings.color_picker_type != 'dropdown_with_color'
          assign no_dropdown = true
        else
          assign no_dropdown = false
        endif
        if option.values.size == 1
          assign selected_value = option.values.first
        else
          assign selected_value = selected_variant.options[forloop.index0]
        endif
        -%}
        {%- capture btn_size_chart -%}
          {%- if show_dialog_size_chart == false and size_list contains name_downcase and use_size_chart_page or use_size_chart_image -%}
            {%- assign show_dialog_size_chart = true -%}
            {%- if use_size_chart_page -%}
              <button class="hdt-s-text hdt-font-medium" aria-controls="modal-{{ block.id }}" aria-expanded="false">{{ 'products.product.size_chart_button' | t }}</button>
            {%- else -%}
              <wrapp-open-pswp-btn class="hdt-contents" data-obj-img='{ "src": "{{ image_size_chart | image_url: width: image_size_chart.width }}", "width": "{{ image_size_chart.width }}", "height": "{{ image_size_chart.height }}", "alt": "{{ image_size_chart.alt }}" }'><button class="hdt-s-text hdt-font-medium">{{ 'products.product.size_chart_button' | t }}</button></wrapp-open-pswp-btn>
            {%- endif -%}
          {%- endif -%}
        {%- endcapture -%}
  
        <fieldset class="hdt-product-form__input is-style-{{ option_type }}{% if size_list contains name_downcase and show_dialog_size_chart %} hdt-has-btn-size-chart{% endif %}" type="{% if option_type == 'color' %}{{ block.settings.color_picker_type }}{% else %}{{ block.settings.picker_type }}{% endif %}" data-index="{{ forloop.index0 }}">
          <legend class="hdt-product-form__label hdt-s-text"><span>{{ option.name }}{% unless hide_update_value %}: <span update-value class="hdt-font-bold">{{ selected_value | default: choose_an_option }}</span>{% endunless %}</span> {{ btn_size_chart }}</legend>
          {%- if no_dropdown -%}
            <div class="hdt-product-form__values">
              {%- render 'product-variant-options', hide_sold_out: hide_sold_out, option_type: option_type, product: product, option: option, block: block, product_form_id: product_form_id, variants_option1_arr: variants_option1_arr, variants_option2_arr: variants_option2_arr, variants_option3_arr: variants_option3_arr, variants_option1_available_arr: variants_option1_available_arr, variants_option2_available_arr: variants_option2_available_arr, variants_option3_available_arr: variants_option3_available_arr, color_option_index: color_option_index, un_no_pick: un_no_pick, selected_value: selected_value -%}
            </div>
          {%- else -%}
            <input is-value type="hidden" name="option{{ forloop.index }}" value="{{ selected_value | escape }}" form="{{ product_form_id }}">
            <div class="hdt-relative">
              <button class="hdt-select" aria-controls="variant-popover{{ section.id }}-{{ forloop.index0 }}" aria-owns="variant-listbox{{ section.id }}-{{ forloop.index0 }}">{{ selected_value | default: choose_an_option }}</button>
              {%- render 'icon' with 'caret' -%}
              <hdt-popover class="hdt-popover hdt-hidden hdt-popover-variant" id="variant-popover{{ section.id }}-{{ forloop.index0 }}" class="hdt-product-form__values" config='{ "closeRichlistSelect": true }' color-scheme="{{ settings.color_scheme_dialog }}">
                <hdt-richlist role="listbox" selected="{{ selected_value | escape }}" id="variant-listbox{{ section.id }}-{{ forloop.index0 }}">
                  {%- render 'product-variant-options', hide_sold_out: hide_sold_out, option_type: option_type, product: product, option: option, block: block, product_form_id: product_form_id, variants_option1_arr: variants_option1_arr, variants_option2_arr: variants_option2_arr, variants_option3_arr: variants_option3_arr, variants_option1_available_arr: variants_option1_available_arr, variants_option2_available_arr: variants_option2_available_arr, variants_option3_available_arr: variants_option3_available_arr, un_no_pick: un_no_pick, selected_value: selected_value -%}
                </hdt-richlist>
              </hdt-popover>
            </div>
          {%- endif -%}
        </fieldset>
  
      {%- endfor -%}
    </hdt-variant-picker>
    <noscript class="product-form__noscript-wrapper-{{ section.id }}">
      <div class="hdt-product-form__input">
        <label class="hdt-form__label" for="Variants-{{ section.id }}">{{- 'products.product.product_variants' | t -}}</label>
        <div class="hdt-form__wrapp">
          <select name="id" id="Variants-{{ section.id }}" class="hdt-select" form="{{ product_form_id }}" >
            {%- for variant in product.variants -%}
              {%- liquid
                if hide_sold_out and variant.available == false
                continue
                endif
                -%}
              <option data-mdid="{{ variant.featured_media.id }}" data-inventoryQuantity="{{ variant.inventory_quantity }}" data-inventoryPolicy="{{ variant.inventory_policy }}" {% 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>
        </div>
      </div>
    </noscript>
    {%- if show_dialog_size_chart and use_size_chart_page -%}
      <hdt-modal id="modal-{{ block.id }}" class="hdt-modal hdt-product__modal hdt-modal__size-chart hdt-hidden" effect="slide" config='{"appendToBody": true}' color-scheme="{{ settings.color_scheme_dialog }}">
        <h3 class="hdt-product__modal-title" slot="header">{{ block.settings.size_chart_page.title }}</h3>
        <div class="hdt-rte">{{ block.settings.size_chart_page.content }}</div>
      </hdt-modal>
    {%- endif -%}
  {%- endunless -%}
</div>
{% schema %}
{
  "name": "t:sections.main-product.blocks.variant_picker.name",
  "tag": null,
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_historystate",
      "default": false,
      "label": "Enable historyState",
      "info": "Update history state for product deeplinking shopify. It’s possible to create a deep-link directly to a specific variant by adding a query string to a product page URL. You can achieve this by appending the ?variant= query parameter to the URL of the product, along with the ID of the variant. Not working when product variant is No Pick."
    },
    {
      "type": "select",
      "id": "color_picker_type",
      "options": [
        {
          "value": "block",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_picker_type.options__4.label"
        },
        {
          "value": "block_with_color",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_picker_type.options__5.label"
        },
        {
          "value": "color",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_picker_type.options__6.label"
        },
        {
          "value": "color_rounded",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_picker_type.options__7.label"
        },
        {
          "value": "dropdown",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_picker_type.options__8.label"
        },
        {
          "value": "dropdown_with_color",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_picker_type.options__9.label"
        },
        {
          "value": "image",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_picker_type.options__10.label"
        },
        {
          "value": "image_rounded",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_picker_type.options__11.label"
        }
      ],
      "default": "block",
      "label": "t:sections.main-product.blocks.variant_picker.settings.color_picker_type.label"
    },
    {
      "type": "select",
      "id": "color_size",
      "options": [
        {
          "value": "small",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_size.options__1.label"
        },
        {
          "value": "medium",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_size.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.main-product.blocks.variant_picker.settings.color_size.options__3.label"
        }
      ],
      "label": "t:sections.main-product.blocks.variant_picker.settings.color_size.label",
      "info": "t:sections.main-product.blocks.variant_picker.settings.color_size.info",
      "default": "medium"
    },
    {
      "type": "select",
      "id": "picker_type",
      "options": [
        {
          "value": "block",
          "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__4.label"
        },
        {
          "value": "dropdown",
          "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__5.label"
        }
      ],
      "default": "block",
      "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-product.blocks.variant_picker.settings.header_size_chart.content",
      "info": "t:sections.main-product.blocks.variant_picker.settings.header_size_chart.info"
    },
    {
      "type": "select",
      "id": "size_chart_source",
      "options": [
        {
          "value": "page",
          "label": "t:sections.main-product.blocks.variant_picker.settings.size_chart_source.options__1.label"
        },
        {
          "value": "image",
          "label": "t:sections.main-product.blocks.variant_picker.settings.size_chart_source.options__2.label"
        }
      ],
      "default": "page",
      "label": "t:sections.main-product.blocks.variant_picker.settings.size_chart_source.label"
    },
    {
      "type": "page",
      "id": "size_chart_page",
      "label": "t:sections.main-product.blocks.variant_picker.settings.size_chart_page.label",
      "info": "t:sections.main-product.blocks.variant_picker.settings.size_chart_page.info"
    },
    {
      "type": "image_picker",
      "id": "size_chart_image",
      "label": "t:sections.main-product.blocks.variant_picker.settings.size_chart_image.label"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Block title",
      "default": "Variant picker"
    },
  ],
  "presets": [
    { 
      "name": "t:sections.main-product.blocks.variant_picker.name",
    }
  ]
}
{% endschema %}