<template>
  <div class="item-summary-album">
    <div class="item-summary-images">
      <img
        class="item-summary-image"
        v-for="imageUrl in itemImageUrls"
        v-bind:key="imageUrl.index"
        v-bind:src="`https://api.nosearch.com/ns_api/v1/product/storeImage?imageUrl=${imageUrl}`"
        @load="onImgsLoad"
      />
    </div>
    <div
      v-if="itemImageUrls.length > 1"
      class="item-summary-image-circle-wrapper"
    >
      <div
        class="item-summary-image-circle"
        v-for="(imageUrl, index) in itemImageUrls"
        v-bind:key="imageUrl.index"
        v-bind:class="{ activeImg: index === curPos }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "itemImageSlider",
  props: {
    itemImageUrls: Array,
    onImgsLoad: Function,
  },
  data() {
    return {
      curPos: 0,
      postion: 0,
      start_x: 0,
      end_x: 0,
      IMAGE_WIDTH: 0,
      images: null,
      isImgLoaded: false,
    };
  },
  computed: {
    getImageWidth: () => {
      const screenWidth = window.screen.width;
      if (screenWidth > 500) return 500;
      else {
        const imgWidth = document.querySelector(".item-summary-images")
          .offsetWidth;
        return imgWidth;
      }
    },
  },
  mounted: function () {
    this.IMAGE_WIDTH = this.getImageWidth;
    this.images = document.querySelector(".item-summary-images");
    this.images.addEventListener("touchstart", this.touch_start);
    this.images.addEventListener("touchend", this.touch_end);
  },
  methods: {
    prev() {
      if (this.curPos > 0) {
        this.postion += this.IMAGE_WIDTH;
        this.images.style.transform = `translateX(${this.postion}px)`;
        this.curPos = this.curPos - 1;
      }
    },
    next() {
      if (this.curPos < this.itemImageUrls.length - 1) {
        this.postion -= this.IMAGE_WIDTH;
        this.images.style.transform = `translateX(${this.postion}px)`;
        this.curPos = this.curPos + 1;
      }
    },

    touch_start(event) {
      this.start_x = event.touches[0].pageX;
    },

    touch_end(event) {
      this.end_x = event.changedTouches[0].pageX;
      if (this.start_x > this.end_x) {
        this.next();
      } else {
        this.prev();
      }
    },
  },
};
</script>

<style></style>
