{% comment %}
  Renders a hotspot

  Accepts:
  - index: {Number} The index number of hotspot style number (optional)
  - type: {String} The trigger type of product (optional)
  - open_as: {String} The display type of product (optional)
  - mode: {String} The type color of hotspot (optional)
  - style: {String} The style of hotspot (optional)
  - top: {Number} The top position of hotspot (optional)
  - left: {Number} The left position of hotspot (optional)
  - product: {Object} The product of hotspot (required)
  - placement: {String} The display position of product (optional)

  Usage:
  {% render 'hotspot',
    index: index,
    type: type,
    open_as: open_as,
    mode: mode,
    style: style,
    top: top,
    left: left,
    product: product,
    placement: placement
  %}

  *** Import schema when hotspot is not block:
  ...hotspotBlockSchema({ idDefault: 'hotspot1' })
{% endcomment %}

{{ 'reviews.css' | asset_url | stylesheet_tag }}
{{ 'product-info-variant.css' | asset_url | stylesheet_tag }}
{{ 'section-quick-view-content.css' | asset_url | stylesheet_tag }}
{{ 'badge.css' | asset_url | stylesheet_tag }}
{{ 'scrollbar.css' | asset_url | stylesheet_tag }}
{{ 'product-info-content-quickview.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 }}
{{ 'hotspot.css' | asset_url | stylesheet_tag }}

{% liquid
  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
%}

{% capture hotspot_trigger %}
  {% case mode %}
    {% when 'dark' %}
      {% assign bg_hotspot_animation = '#000' %}
    {% when 'light' %}
      {% assign bg_hotspot_animation = '#fff' %}
    {% when 'accent' %}
      {% assign bg_hotspot_animation = 'rgba(var(--color-accent))' %}
  {% endcase %}
  <div class='hotspot__trigger hotspot__trigger--{{ style }}' style='--bg-hotspot-animation: {{ bg_hotspot_animation }}'>
    {% case style %}
      {% when 'simple' %}
        {% render 'button', class: 'hostpot__trigger-button', mode: mode %}
      {% when 'plus' %}
        {% render 'button', class: 'hostpot__trigger-button', mode: mode, icon: 'plus', icon_size: '12',  %}
      {% else %}
        {% render 'button', class: 'hostpot__trigger-button', mode: mode, number: index  %}
    {% endcase %}
  </div>
{% endcapture %}

<div class='xo-hotspot' style='--top: {{ top }}; --left: {{ left }}'>
  {% case open_as %}
    {% when 'quickview' %}
      <xo-product-quick-view-trigger xo-modal-name='quick-view' xo-product-url='{{ shop.url }}/products/{{ product.handle }}/?section_id=quick-view-content'>
        {{ hotspot_trigger }}
      </xo-product-quick-view-trigger>
    {% else %}
      <xo-popover-trigger xo-name='hotspot-{{ random_number }}' xo-type='{{ type }}'>
        {{ hotspot_trigger }}
      </xo-popover-trigger>
      <xo-popover xo-name='hotspot-{{ random_number }}' xo-portal xo-placement='{{ placement | default: 'right-top'  }}'>
        {% if product %}
          <xo-product xo-product-id='{{ product.id }}' xo-section-id='{{section.id}}' class='hotspot__product'>
            <div class='xo-product-card__header'>
              <a href='{{ product.url }}'>
                {% render 'product-image', product: product, show_secondary_image: true %}
              </a>
              <div class='xo-product-card__badge'>
                {% render 'badge-sale', product: product, use_variant: true %}
              </div>
              {% render 'badge-sold-out', product: product, use_variant: true %}
            </div>
            <div class='xo-product-card__information'>
              <h2 class='xo-product-card__title'>
                <a href='{{ product.url }}'>
                  {{ product.title | escape }}
                </a>
              </h2>
              <div class='xo-product-card__price'>
                <div class='xo-product-card__price-inner'>
                  {% render 'price', product: product, use_variant: true, reverse: false, card: true %}
                </div>
              </div>
            </div>
            {% render 'product-data', product: product %}
          </xo-product>
        {% else %}
          {% render 'product-card-placeholder' %}
        {% endif %}
      </xo-popover>
  {% endcase %}
</div>
