{%- doc -%}
  Renders a slideshow component.
  Condiional <slideshow-arrows> component and slideshow controls.

  @param {object[]} slides - the slides of the slideshow
  @param {string} [ref] - the ref of the slideshow component
  @param {string} [class] - HTML class attribute of the slideshow component
  @param {string} [controls] - the controls of the slideshow component
  @param {string} [style] - HTML style attribute of the slideshow component
  @param {boolean} [autoplay] - whether the slideshow will autoplay
  @param {number} [autoplay_speed] - the speed of the slideshow autoplay
  @param {boolean} [auto_hide_controls] - whether to hide slideshow-controls when the scroller is smaller than the viewport
  @param {boolean} [infinite] - whether the slideshow will loop
  @param {number} [initial_slide] - the 0-based index of the initial slide, defaults to 0
  @param {string} [slideshow_gutters] - the gutter positions to render. Set width with CSS variables --gutter-slide-width
  @param {number} [slide_count] - the total number of slides
  @param {string} [slide_size] - the height of the slides
  @param {string} [slide_position] - the vertical position of the slides, defaults to 'top'
  @param {boolean} [show_arrows] - whether the slideshow will render a slideshow-arrows component
  @param {string} [slideshow_arrows] - a custom slideshow-arrows component to render instead of the default
  @param {string} [icon_style] - The style of the icon, defaults to 'arrow'
  @param {string} [icon_shape] - The shape of the icon background (none, circle, square), defaults to 'none'
  @param {string} [arrows_position] - The position of the arrows, defaults to 'bottom'
  @param {string} [attributes] - Additional attributes to add to the slideshow component
  @param {boolean} [header] - The title of the slideshow

  @example
  {% render 'slideshow', slides: slides, slide_count: collection.products.size, ref: 'mobileSlideshow' %}
{%- enddoc -%}

{%- liquid
  assign class = class | strip | strip_newlines

  if slide_position == 'stretch'
    assign class = class | append: ' slideshow--stretch-content' | strip
  endif

  assign slide_min_height = '--slide-min-height: auto;'
  assign slide_min_height_desktop = '--slide-min-height-desktop: auto;'

  case slide_size
    when 'small'
      assign slide_min_height = slide_min_height | replace: 'auto', '17.5rem'
      assign slide_min_height_desktop = slide_min_height_desktop | replace: 'auto', '26.25rem'
    when 'medium'
      assign slide_min_height = slide_min_height | replace: 'auto', '21.25rem'
      assign slide_min_height_desktop = slide_min_height_desktop | replace: 'auto', '35rem'
    when 'large'
      assign slide_min_height = slide_min_height | replace: 'auto', '25rem'
      assign slide_min_height_desktop = slide_min_height_desktop | replace: 'auto', '45rem'
  endcase

  case slide_position
    when 'center'
      assign align_items = '--slideshow-align-items: center;'
    when 'bottom'
      assign align_items = '--slideshow-align-items: flex-end;'
    when 'top'
      assign align_items = '--slideshow-align-items: flex-start;'
    when 'stretch'
      assign align_items = '--slideshow-align-items: stretch;'
  endcase

  assign style = style | strip | strip_newlines | append: align_items | append: slide_min_height | append: slide_min_height_desktop
-%}

{%- liquid
  assign timeline_scope = ''

  for index in (1..slide_count)
    assign index0 = index | minus: 1
    assign scope = '--slide-index, ' | replace: 'index', index0
    assign timeline_scope = timeline_scope | append: scope
  endfor

  assign timeline_scope = timeline_scope | strip | split: ',' | compact | join: ','
-%}

<slideshow-component
  {% if ref != blank %}
    ref="{{ ref }}"
  {% endif %}
  {% if class != blank %}
    class="{{ class }}"
  {% endif %}
  style="--slideshow-timeline: {{ timeline_scope }};{{ style }}"
  {% if autoplay == true %}
    autoplay="{{ autoplay_speed }}" aria-live="polite"
  {% endif %}
  initial-slide="{{ initial_slide | default: 0 }}"
  {% if auto_hide_controls %}
    auto-hide-controls
  {% endif %}
  {% unless infinite == false %}
    infinite
  {% endunless %}

  {{ attributes }}
>
  {% if header != blank %}
    {{ header }}
  {% endif %}
  <slideshow-container ref="slideshowContainer">
    {% if show_arrows %}
      {% render 'slideshow-arrows', icon_style: icon_style, icon_shape: icon_shape, arrows_position: arrows_position %}
    {% endif %}
    {% if slideshow_arrows %}
      {{ slideshow_arrows }}
    {% endif %}
    <slideshow-slides
      tabindex="-1"
      ref="scroller"
      {% if slideshow_gutters %}
        gutters="{{ slideshow_gutters }}"
      {% endif %}
    >
      {{ slides }}
    </slideshow-slides>
  </slideshow-container>
  {{ controls }}
</slideshow-component>

{% render 'slideshow-styles' %}
