{%- doc -%}
  Renders a default variant picker, used to display the variant picker in the variants block.

  @param {object} product_resource - The product object.
  @param {object} [block] - The block object
{%- enddoc -%}

{% assign block_settings = block.settings %}

{% unless product_resource.has_only_default_variant %}
  {% liquid
    assign button_background_brightness = section.settings.color_scheme.settings.foreground | color_brightness
    if button_background_brightness < 105
      assign strikethrough_color_mix = '#000'
    else
      assign strikethrough_color_mix = '#fff'
    endif
  %}
  <variant-picker
    class="variant-picker spacing-style variant-picker--{{ block_settings.alignment }}"
    style="--color-strikethrough-mix: {{ strikethrough_color_mix }}; {% render 'spacing-style', settings: block_settings %}"
    data-section-id="{{ section.id }}"
    data-product-id="{{ product_resource.id }}"
    data-block-id="{{ block.id }}"
    data-product-url="{{ product_resource.url }}"
    ref="mainVariantPicker"
    {% if product.id == product_resource.id %}
      data-template-product-match="true"
    {% endif %}
    {{ block.shopify_attributes }}
    {% if request.visual_preview_mode %}
      data-shopify-visual-preview
    {% endif %}
  >
    <form class="variant-picker__form">
      {%- for product_option in product_resource.options_with_values -%}
        {%- liquid
          assign swatch_count = product_option.values | map: 'swatch' | compact | size
          assign variant_style = block_settings.variant_style

          if swatch_count > 0 and block_settings.show_swatches
            if block_settings.variant_style == 'dropdown'
              assign variant_style = 'swatch_dropdown'
            else
              assign variant_style = 'swatch'
            endif
          endif

          if variant_style == 'buttons' and settings.variant_button_width == 'equal-width-buttons'
            assign fieldset_id = section.id | append: '-' | append: product_resource.id | append: '-' | append: product_option.name | handleize
            assign option_id_attribute = 'data-option-id="' | append: fieldset_id | append: '"'
            assign longest_value = 0
          endif
        -%}

        {%- if product_option.values.size == 1 and variant_style != 'swatch' -%}
          <div
            class="variant-option"
            data-testid="variant-option-single"
          >
            {{- product_option.name | escape -}}
            <span
              class="variant-option__swatch-value"
              data-testid="variant-option-single-value"
            >
              {{- product_option.selected_value -}}
            </span>
          </div>
        {%- elsif variant_style == 'swatch' or block_settings.variant_style == 'buttons' -%}
          {%- assign fieldset_index = forloop.index0 -%}
          <fieldset
            class="variant-option variant-option--buttons{% if variant_style == 'swatch' %} variant-option--swatches{% else %} variant-option--{{ settings.variant_button_width }}{% endif %}"
            data-fieldset-index="{{ fieldset_index }}"
            ref="fieldsets[]"
            {{ option_id_attribute }}
          >
            <legend>
              {{ product_option.name | escape -}}
              {%- if variant_style == 'swatch' -%}
                <span class="variant-option__swatch-value">{{ product_option.selected_value }}</span>
              {%- endif %}
            </legend>
            {%- for product_option_value in product_option.values -%}
              {% if product_option_value.size > longest_value and option_id_attribute %}
                {% assign longest_value = product_option_value.size %}
              {% endif %}
              <label
                class="variant-option__button-label{% if variant_style == 'swatch' %} variant-option__button-label--has-swatch{% endif %}"
              >
                <input
                  type="radio"
                  name="{{ product_option.name | escape }}-{{ block.id }}-{{ product_resource.id }}"
                  value="{{ product_option_value | escape }}"
                  aria-label="{{ product_option_value.name }}"
                  {% if product_option_value.available == false %}
                    aria-disabled="true"
                  {% endif %}
                  data-previous-checked="false"
                  data-fieldset-index="{{ fieldset_index }}"
                  data-input-index="{{ forloop.index0 }}"
                  data-input-id="{{ product_option.position }}-{{ forloop.index0 }}"
                  data-option-value-id="{{ product_option_value.id }}"
                  data-option-available="{{ product_option_value.available }}"
                  data-connected-product-url="{{ product_option_value.product_url }}"
                  {% if product_option_value.variant.id %}
                    data-variant-id="{{ product_option_value.variant.id }}"
                  {% endif %}
                  {% if product_option_value.selected %}
                    data-current-checked="true"
                    checked
                  {% else %}
                    data-current-checked="false"
                  {% endif %}
                >
                {% if variant_style == 'swatch' %}
                  {% liquid
                    assign featured_media = product_option_value.variant.featured_media

                    # If the variant has no featured media, and we have a combined listing product, then fall back to
                    # using the featured media of the child product that is linked to this option value.
                    if featured_media == blank and product_option_value.product_url
                      assign featured_media = product_option_value.variant.product.featured_media
                    endif
                  %}

                  {% render 'swatch',
                    swatch: product_option_value.swatch,
                    variant_image: featured_media,
                    mode: 'unscaled'
                  %}
                {% else %}
                  {% if product_option_value.available == true %}
                    <span
                      class="variant-option__button-label__pill"
                      data-key="variant-option-pill"
                    ></span>
                  {% endif %}
                  <span
                    class="variant-option__button-label__text"
                    data-key="variant-option-text"
                  >
                    {{- product_option_value | escape -}}
                  </span>
                {% endif %}
                {% render 'strikethrough-variant', product_option: product_option_value %}
              </label>
            {%- endfor -%}
            {% if option_id_attribute %}
              {% style %}
                [data-option-id="{{ fieldset_id }}"] {
                  --variant-ch: {{ longest_value | times: 0.65 }}em;
                }
              {% endstyle %}
            {% endif %}
          </fieldset>
        {%- elsif block_settings.variant_style == 'dropdowns' -%}
          {%
            # There is an opportunity to build a custom select component that will allow us to style the select element further (animation for dropdown, swatches shown in the dropdown options, etc)
            # It's too bad as it mean rebuilding baked in behaviours but I think we've already done that for the locale selectors
            # in dawn. So it might mean more time spent in setting it up but worth it for future updates/styling.
          %}
          {% liquid
            assign property_being_updated = false
            if settings.variant_swatch_width != settings.variant_swatch_height
              assign property_being_updated = true
              # (original width / original height) x new height (20px at the moment) = new width
              assign new_width = settings.variant_swatch_width | times: 1.0 | divided_by: settings.variant_swatch_height | times: 20
            endif
          %}

          <div class="variant-option variant-option--dropdowns">
            <label for="Option-{{ block.id }}-{{ forloop.index0 }}">{{ product_option.name | escape }}</label>
            <div
              class="variant-option__select-wrapper"
              style="
                {%- if property_being_updated  -%}
                  --variant-picker-swatch-width: clamp(10px,{{ new_width }}px, 50px);
                {%- endif -%}
              "
            >
              <select
                id="Option-{{ block.id }}-{{ forloop.index0 }}"
                name="options[{{ product_option.name | escape }}]"
                class="variant-option__select"
              >
                {%- for product_option_value in product_option.values -%}
                  <option
                    value="{{ product_option_value | escape }}"
                    data-input-id="{{ product_option.position }}-{{ forloop.index0 }}"
                    data-option-value-id="{{ product_option_value.id }}"
                    data-variant-id="{{ product_option_value.variant.id }}"
                    data-connected-product-url="{{ product_option_value.product_url }}"
                    {% if product_option_value.selected %}
                      selected="selected"
                    {% endif %}
                  >
                    {% if product_option_value.available == false %}
                      {{ product_option_value | escape }} - {{ 'content.unavailable' | t }}
                    {% else %}
                      {{ product_option_value | escape }}
                    {% endif %}
                  </option>
                {%- endfor -%}
              </select>
              <svg
                aria-hidden="true"
                focusable="false"
                class="icon icon-caret"
                viewBox="0 0 10 6"
              >
                {%- render 'icon', icon: 'caret' -%}
              </svg>
            </div>
          </div>
        {%- endif -%}
      {%- endfor -%}

      <script type="application/json">
        {{ product_resource.selected_or_first_available_variant | json }}
      </script>
    </form>
  </variant-picker>
{% endunless %}

{% stylesheet %}
  /* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
{% endstylesheet %}