{% assign el_id = "recently_viewed_products_modal" %}

{% if section.settings.show_recently_viewed_products %}
<style>
  #{{ el_id }} {
    position: fixed;
    bottom: 0;
    width: 100%;
    pointer-events: none;
  }
  .{{ el_id }}__inner {
    background: var(--cream);
    width: 100%;
    padding: 18px;
    pointer-events: initial;
    position: absolute;
    left: 0;
  }
  .{{ el_id }}__inner button {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    display: flex;
  }
  .{{ el_id }}__inner button svg {
    width: 10px;
    height: 10px;
  }
  .{{ el_id }}__swiper {
    width: 100%;
  }
  .{{ el_id }}__inner .swiper-button-next,
  .{{ el_id }}__inner .swiper-button-prev {
    zoom: 0.55;
    padding: 7px;
  }
  .{{ el_id }}__inner .swiper-button-next svg,
  .{{ el_id }}__inner .swiper-button-prev svg {
    width: 18px;
  }
  .{{ el_id }}__inner .swiper-button-next {
    right: 0px;
  }
  .{{ el_id }}__inner .swiper-button-prev {
    left: 0px;
  }
  .{{ el_id }}__loading {
    height: 80px;
  }
  .{{ el_id }}__loading svg .path {
    stroke: var(--brown);
  }
  @media only screen and (min-width: 1024px) {
    #{{ el_id }} {
      bottom: unset;
      right: 0;
      margin-top: 30px;
    }
    .{{ el_id }}__inner {
      position: relative;
      left: unset;
      width: 330px;
    }
  }

</style>

<div id="{{ el_id }}_container">
  <Teleport to="body">
    <div
      class="sticky-below-header container zi-7 flex ai-end jc-end"
      :style="{ opacity: show ? 1 : 0 }"
      id="{{ el_id }}"
    >
      <div class="{{ el_id }}__inner tc flex flex-column rowgap-15">
        <button>{{ settings.icon_close }}</button>
        {% unless section.settings.title == blank %}
          <h7 class="h7">{{ section.settings.title }}</h7>
        {% endunless %}
        <div class="{{ el_id }}__loading relative" v-if="loading">
          <span class="btn-loading">{{ settings.icon_loading }}</span>
        </div>
        <div class="pl-10 pr-10 ml-20 mr-20 d-ml-0 d-mr-0 relative" v-if="!loading">
          <div class="{{ el_id }}__swiper swiper">
            <div class="swiper-wrapper"></div>
          </div>
          <div class="swiper-button-prev">{{ settings.icon_arrow_left }}</div>
          <div class="swiper-button-next">{{ settings.icon_arrow_right }}</div>
        </div>
      </div>
    </div>
  </Teleport>
</div>

<script>
  Vue.createApp({
    delimiters: ['${', '}'],
    data() {
      return {
        show: false,
        loading: true
      }
    },
    mounted() {
      const rv_cookie = $360.getCookie('shopify_recently_viewed');
      if (rv_cookie) {
        this.show = true;
        const slugs = JSON.parse(rv_cookie.split('=').at(1)).reverse()
        const parser = new DOMParser();
        Promise.all(slugs.map(slug => axios.get(`/products/${slug}?view=image-only`))).then(cards => {
          this.loading = false;
          setTimeout(() => {
            const {{ el_id }}__swiper = new Swiper('.{{ el_id }}__swiper', {
              autoHeight: true,
              slidesPerView: 4,
              spaceBetween: 8,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
              on: {
                init: function() {
                  $360.lazyLoadInstance.update();
                },
              }
            });
            cards.forEach(({ data: card }) => {
              const $card = parser.parseFromString(card, 'text/html')
              const $card_image = $card.querySelector('a')
              {{ el_id }}__swiper.appendSlide([
                `<div class="swiper-slide">${$card_image.outerHTML.toString()}</div>`
              ])
            })
          }, 100)
        })
        const $button_close = document.querySelector('.{{ el_id }}__inner button');
        const $el = document.querySelector('#{{ el_id }}');
        $button_close.addEventListener('click', function(){
          $el.style.display = 'none';
        })
      }
    }
  }).mount('#{{ el_id }}_container');

</script>
{% endif %}

{% schema %}
{
  "name": "Recently Viewed Products",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_recently_viewed_products",
      "label": "Show"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title"
    },
  ],
  "presets": [
    {
      "name": "Recently Viewed Products",
    }
  ]
}
{% endschema %}