{% comment %}
  Renders a hotspot trigger

  Accepts:
  - product: {Object} Product (required)
  - placement: {string} Placement (optional)
  - index: {number} index of hotspot for style number (required)
  Usage:
  {% render 'hotspot-trigger' %}
{% endcomment %}

{{ 'hotspot-style-2.css' | asset_url | stylesheet_tag }}
{{ 'reviews.css' | asset_url | stylesheet_tag }}
{{ 'product-info-variant.css' | asset_url | stylesheet_tag }}
{{ 'badge.css' | asset_url | stylesheet_tag }}
{{ 'product-info-content-quickview.css' | asset_url | stylesheet_tag }}
{{ 'section-quick-view-content.css' | asset_url | stylesheet_tag }}
{{ 'product-info-media-style3.css' | asset_url | stylesheet_tag }}
{{ 'countdown-stock.css' | asset_url | stylesheet_tag }}
{{ 'countdown-time.css' | asset_url | stylesheet_tag }}

{% assign min = 100000000 %}
{% assign max = 999999999 %}
{% assign range = max | minus: min | plus: 1 %}
{% assign random_offset = 'now' | date: '%N' | modulo: range %}
{% assign random_number = min | plus: random_offset %}

{{ 'hotspot-trigger.css' | asset_url | stylesheet_tag }}

{% if section.settings.open_as == 'quickview' %}
  {% assign min = 100000000 %}
  {% assign max = 999999999 %}
  {% assign range = max | minus: min | plus: 1 %}
  {% assign random_offset = 'now' | date: '%N' | modulo: range %}
  {% assign random_number = min | plus: random_offset %}
  <xo-product-quick-view-trigger xo-modal-name='quick-view' xo-product-url='{{ shop.url }}/products/{{ product.handle }}/?section_id=quick-view-content'>
    {% if section.settings.dot_style == 'simple' %}
      <div
        class='{% if section.settings.button_style == 'dark' %} xo-trigger__icon-dark {% elsif section.settings.button_style == 'color' %} xo-trigger__icon-color {% else %} xo-trigger__icon {% endif %}'
      ></div>
    {% elsif section.settings.dot_style == 'plus' %}
      <div class='{% if section.settings.button_style == 'light' %} xo-trigger__plus-light {% elsif section.settings.button_style == 'color' %} xo-trigger__plus-color {% else %} xo-trigger__icon-plus {% endif %}'>
        {% if section.settings.button_style == 'light' %}
          {% render 'icon', name: 'plus', icon_size: '12', color: '#000' %}
        {% else %}
          {% render 'icon', name: 'plus', icon_size: '12', color: '#fff' %}
        {% endif %}
      </div>
    {% elsif section.settings.dot_style == 'number' %}
      <div class='{% if section.settings.button_style == 'light' %} xo-trigger__plus-light {% elsif section.settings.button_style == 'color' %} xo-trigger__plus-color  {% else %} xo-trigger__icon-plus {% endif %}'>
        <span>{{ index }}</span>
      </div>
    {% endif %}
  </xo-product-quick-view-trigger>
{% else %}
  {% assign min = 100000000 %}
  {% assign max = 999999999 %}
  {% assign range = max | minus: min | plus: 1 %}
  {% assign random_offset = 'now' | date: '%N' | modulo: range %}
  {% assign random_number = min | plus: random_offset %}

  <xo-popover-trigger xo-name='hotspot-{{ random_number }}' xo-type='{{ section.settings.trigger_type }}'>
    {% if section.settings.dot_style == 'simple' %}
      <div
        class='{% if section.settings.button_style == 'dark' %} xo-trigger__icon-dark {% elsif section.settings.button_style == 'color' %} xo-trigger__icon-color {% else %} xo-trigger__icon {% endif %}'
      ></div>
    {% elsif section.settings.dot_style == 'plus' %}
      <div class='{% if section.settings.button_style == 'light' %} xo-trigger__plus-light {% elsif section.settings.button_style == 'color' %} xo-trigger__plus-color {% else %} xo-trigger__icon-plus {% endif %}'>
        {% if section.settings.button_style == 'light' %}
          {% render 'icon', name: 'plus', icon_size: '12', color: '#000' %}
        {% else %}
          {% render 'icon', name: 'plus', icon_size: '12', color: '#fff' %}
        {% endif %}
      </div>
    {% elsif section.settings.dot_style == 'number' %}
      <div class='{% if section.settings.button_style == 'light' %} xo-trigger__plus-light {% elsif section.settings.button_style == 'color' %} xo-trigger__plus-color  {% else %} xo-trigger__icon-plus {% endif %}'>
        <span>{{ index }}</span>
      </div>
    {% endif %}
  </xo-popover-trigger>
  <xo-popover xo-name='hotspot-{{ random_number }}' xo-portal xo-placement='{{ placement | default: 'right-center'  }}'>
    <div class='xo-trigger__content'>
      <div xo-binding='img'>
        <a href='{{ product.url }}'>
          {% render 'product-image', product: product, show_secondary_image: true, media_aspect_ratio: media_aspect_ratio %}
        </a>
      </div>
      <h1 class='product-lookbook-title xo-product-info-content__title'>
        {{ product.title }}
      </h1>
      {% if product.variants.size > 1 %}
        {% for option in product.options_with_values %}
          {% if option.name == 'Color' %}
            <div class='xo-product-card__variants xo-product-card__variants--style6'>
              {% render 'product-variant', option: option, style: 'color', modified: 'style6', product: product %}
            </div>
            {% break %}
          {% endif %}
        {% endfor %}
      {% endif %}
      <xo-product-will-change xo-unique-id='product-price-{{ product.id }}'>
        {% render 'price', product: product, use_variant: true %}
        {% if cart.taxes_included == true %}
          <span>{{ 'products.product.price.include_tax' | t }}</span>
        {% endif %}
      </xo-product-will-change>
    </div>
  </xo-popover>
{% endif %}
