{{ 'section-slideshow-v3.css' | asset_url | stylesheet_tag }}

<div class='slideshow-v2'>
  <div {% render 'section-attr' %}>
    <div class='slideshow-v2__container'>
      <div class='slideshow-v2__control slideshow-v2__control--left slideshow-v2__control--inactive'></div>
      <div class='slideshow-v2__control slideshow-v2__control--right'></div>
      <div class='slideshow-v2__pagination'></div>
      <div class='slideshow-v2__slider'>
        {% for block in section.blocks %}
          <div class='slideshow-v2__slide slideshow-v2__slide--0 slideshow-v2__slide--active'>
            <div class='slideshow-v2__slide-bg' style='background-image: url("{{ block.settings.bg_img | image_url }}")'></div>
            <div class='slideshow-v2__slide-content'>
              <div class='slideshow-v2__slide-text'>
                <h2 class='slideshow-v2__slide-heading'>{{ block.settings.title }}</h2>
                <div class='slideshow-v2__slide-desc'>
                  {{ block.settings.desc }}
                </div>
                <div class='slideshow-v2__slide-button'>
                  {% render 'button',
                    text: block.settings.button_text,
                    link: block.settings.button_link,
                    mode: block.settings.button_mode,
                    style: block.settings.button_style,
                    size: block.settings.button_size,
                    radius: block.settings.button_radius,
                    padding: block.settings.button_padding
                  %}
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const slider = document.querySelector('.slideshow-v2__slider');
    const slideBGs = document.querySelectorAll('.slideshow-v2__slide-bg');
    const slides = document.querySelectorAll('.slideshow-v2__slide');
    const pagination = document.querySelector('.slideshow-v2__pagination');
    const sliderControls = document.querySelectorAll('.slideshow-v2__control');
    const sliderPagiElems = [];
    let diff = 0;
    let curSlide = 0;
    const numOfSlides = slides.length - 1;
    let animating = false;
    const animTime = 500;
    let autoSlideTimeout;
    const autoSlideDelay = 10000;

    function createBullets() {
      for (let i = 0; i <= numOfSlides; i++) {
        const li = document.createElement('li');
        li.className = `slideshow-v2__pagination-elem slideshow-v2__pagination-elem--${i}`;
        li.dataset.page = i;
        if (i === 0) li.classList.add('active');
        pagination.appendChild(li);
        sliderPagiElems.push(li);
      }
    }

    createBullets();

    function manageControls() {
      sliderControls.forEach((control) => control.classList.remove('slideshow-v2__control--inactive'));
      if (curSlide === 0) document.querySelector('.slideshow-v2__control--left').classList.add('slideshow-v2__control--inactive');
      if (curSlide === numOfSlides) document.querySelector('.slideshow-v2__control--right').classList.add('slideshow-v2__control--inactive');
    }

    function autoSlide() {
      autoSlideTimeout = setTimeout(() => {
        curSlide = (curSlide + 1) % (numOfSlides + 1);
        changeSlides();
      }, autoSlideDelay);
    }

    function changeSlides(instant) {
      if (!instant) {
        animating = true;
        manageControls();
        slider.classList.add('animating');
        requestAnimationFrame(() => {
          slides.forEach((slide) => slide.classList.remove('slideshow-v2__slide--active'));
          slides[curSlide].classList.add('slideshow-v2__slide--active');
          setTimeout(() => {
            slider.classList.remove('animating');
            animating = false;
          }, animTime);
        });
      }
      clearTimeout(autoSlideTimeout);
      sliderPagiElems.forEach((elem) => elem.classList.remove('active'));
      sliderPagiElems[curSlide].classList.add('active');
      slider.style.transform = `translate3d(${-curSlide * 100}%, 0, 0)`;
      slideBGs.forEach((bg) => (bg.style.transform = `translate3d(${curSlide * 50}%, 0, 0)`));
      diff = 0;
    }

    function navigateLeft() {
      if (animating) return;
      if (curSlide > 0) curSlide--;
      changeSlides();
    }

    function navigateRight() {
      if (animating) return;
      if (curSlide < numOfSlides) curSlide++;
      changeSlides();
    }

    slider.addEventListener('mousedown', startSlide);
    slider.addEventListener('touchstart', startSlide);

    function startSlide(e) {
      if (animating) return;
      clearTimeout(autoSlideTimeout);
      const startX = e.pageX || e.touches[0].pageX;
      const winW = window.innerWidth;
      diff = 0;

      function moveSlide(e) {
        const x = e.pageX || e.touches[0].pageX;
        diff = ((startX - x) / winW) * 70;
        if ((!curSlide && diff < 0) || (curSlide === numOfSlides && diff > 0)) diff /= 2;
        slider.style.transform = `translate3d(${-curSlide * 100 - diff}%, 0, 0)`;
        slideBGs.forEach((bg) => (bg.style.transform = `translate3d(${curSlide * 50 + diff / 2}%, 0, 0)`));
      }

      function endSlide() {
        document.removeEventListener('mousemove', moveSlide);
        document.removeEventListener('touchmove', moveSlide);
        if (animating) return;
        if (!diff) {
          changeSlides(true);
          return;
        }
        if (diff > -8 && diff < 8) {
          changeSlides();
          return;
        }
        if (diff <= -8) {
          navigateLeft();
        }
        if (diff >= 8) {
          navigateRight();
        }
      }

      document.addEventListener('mousemove', moveSlide);
      document.addEventListener('touchmove', moveSlide);
      document.addEventListener('mouseup', endSlide, { once: true });
      document.addEventListener('touchend', endSlide, { once: true });
    }

    sliderControls.forEach((control) => {
      control.addEventListener('click', () => {
        if (control.classList.contains('slideshow-v2__control--left')) {
          navigateLeft();
        } else {
          navigateRight();
        }
      });
    });

    sliderPagiElems.forEach((elem) => {
      elem.addEventListener('click', () => {
        curSlide = Number(elem.dataset.page);
        changeSlides();
      });
    });
  });
</script>

{% schema %}
{
  "name": "t:sections.slideshow_v3.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "blocks": [
    {
      "type": "slideshow",
      "name": "t:sections.slideshow_v3.settings.blocks.name",
      "limit": 4,
      "settings": [
        {
          "type": "image_picker",
          "id": "bg_img",
          "label": "t:sections.slideshow_v3.settings.blocks.bg_img.label"
        },
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.slideshow_v3.settings.blocks.title.label",
          "default": "Title"
        },
        {
          "type": "richtext",
          "id": "desc",
          "label": "t:sections.slideshow_v3.settings.blocks.desc.label",
          "default": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>"
        },
        {
          "type": "header",
          "content": "t:sections.all.button_heading.content"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "t:sections.all.button_text.label",
          "default": "ALL PRODUCTS"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.all.button_link.label",
          "default": "/collections/all"
        },
        {
          "type": "select",
          "id": "button_mode",
          "label": "t:sections.all.button_mode.label",
          "options": [
            {
              "value": "light",
              "label": "t:sections.all.button_mode.option__1.label"
            },
            {
              "value": "dark",
              "label": "t:sections.all.button_mode.option__2.label"
            }
          ],
          "default": "light"
        },
        {
          "type": "select",
          "id": "button_style",
          "label": "t:sections.all.button_style.label",
          "options": [
            {
              "value": "primary",
              "label": "t:sections.all.button_style.option__1.label"
            },
            {
              "value": "secondary",
              "label": "t:sections.all.button_style.option__2.label"
            },
            {
              "value": "tertiary",
              "label": "t:sections.all.button_style.option__3.label"
            },
            {
              "value": "link",
              "label": "t:sections.all.button_style.option__4.label"
            }
          ],
          "default": "secondary"
        },
        {
          "type": "select",
          "id": "button_size",
          "label": "t:sections.all.button_size.label",
          "options": [
            {
              "value": "xs",
              "label": "t:sections.all.button_size.option__0.label"
            },
            {
              "value": "sm",
              "label": "t:sections.all.button_size.option__1.label"
            },
            {
              "value": "md",
              "label": "t:sections.all.button_size.option__2.label"
            },
            {
              "value": "lg",
              "label": "t:sections.all.button_size.option__3.label"
            }
          ],
          "default": "sm"
        },
        {
          "type": "range",
          "id": "button_radius",
          "label": "t:sections.all.button_radius.label",
          "max": 4,
          "min": 0,
          "step": 0.2,
          "unit": "rem",
          "default": 0.8
        },
        {
          "type": "range",
          "id": "button_padding",
          "label": "t:sections.all.button_padding.label",
          "info": "t:sections.all.button_padding.info",
          "max": 10,
          "min": 0,
          "step": 0.2,
          "unit": "rem",
          "default": 1.4
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.slideshow_v3.presets.name"
    }
  ]
}
{% endschema %}
