"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const utils = require("../../../utils/utils.js");
const _hoisted_1 = {
  key: 0,
  class: "swiper-dot-container"
};
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
  __name: "Swiper",
  props: {
    activeIndex: {}
  },
  emits: ["change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const activeSwiperIndex = Vue.ref(0);
    const swiperItemNumber = Vue.ref(0);
    const swiperRef = Vue.ref();
    const translateX = Vue.ref(0);
    Vue.watch(
      () => props.activeIndex,
      (val) => {
        activeSwiperIndex.value = val;
        translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
      }
    );
    Vue.watch(activeSwiperIndex, () => {
      emits("change", activeSwiperIndex.value);
    });
    Vue.provide("swiper", {
      activeSwiperIndex,
      swiperRef,
      addSwiperItem,
      removeSwiperItem
    });
    const touchData = {
      x: 0,
      y: 0
    };
    function isActiveDot(index) {
      return index === activeSwiperIndex.value;
    }
    function addSwiperItem() {
      swiperItemNumber.value += 1;
    }
    function removeSwiperItem() {
      swiperItemNumber.value -= 1;
    }
    const swiperStyle = Vue.computed(() => {
      return { transform: `translateX(${translateX.value}px)` };
    });
    function handleTouchStart(event) {
      touchData.x = event.changedTouches[0].pageX;
      touchData.y = event.changedTouches[0].pageY;
    }
    const handleTouchMoveThrottle = utils.throttle(handleTouchMove, 200);
    function handleTouchMove(event) {
      const offsetX = event.changedTouches[0].pageX - touchData.x;
      translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value + offsetX;
    }
    function handleTouchEnd(event) {
      const offsetX = event.changedTouches[0].pageX - touchData.x;
      if (Math.abs(event.changedTouches[0].pageX - touchData.x) > swiperRef.value.offsetWidth / 5) {
        if (offsetX < 0 && activeSwiperIndex.value < swiperItemNumber.value - 1) {
          activeSwiperIndex.value = activeSwiperIndex.value + 1;
        }
        if (offsetX > 0 && activeSwiperIndex.value >= 1) {
          activeSwiperIndex.value = activeSwiperIndex.value - 1;
        }
      }
      translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
    }
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        class: "swiper",
        ref_key: "swiperRef",
        ref: swiperRef
      }, [
        Vue.createElementVNode("div", {
          class: "swiper-item-container",
          style: Vue.normalizeStyle(swiperStyle.value),
          onTouchstart: handleTouchStart,
          onTouchmove: _cache[0] || (_cache[0] = //@ts-ignore
          (...args) => Vue.unref(handleTouchMoveThrottle) && Vue.unref(handleTouchMoveThrottle)(...args)),
          onTouchend: handleTouchEnd
        }, [
          Vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ], 36),
        swiperItemNumber.value > 1 ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
          (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(swiperItemNumber.value, (item, index) => {
            return Vue.openBlock(), Vue.createElementBlock("div", {
              key: item,
              class: Vue.normalizeClass(["swiper-dots", [isActiveDot(index) ? "swiper-current-dots" : ""]])
            }, null, 2);
          }), 128))
        ])) : Vue.createCommentVNode("", true)
      ], 512);
    };
  }
});
exports.default = _sfc_main;
