import { defineComponent, ref, watch, provide, computed, openBlock, createElementBlock, createElementVNode, normalizeStyle, unref, renderSlot, Fragment, renderList, normalizeClass, createCommentVNode } from "vue";
import { throttle } from "../../../utils/utils.mjs";
const _hoisted_1 = {
  key: 0,
  class: "swiper-dot-container"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Swiper",
  props: {
    activeIndex: {}
  },
  emits: ["change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const activeSwiperIndex = ref(0);
    const swiperItemNumber = ref(0);
    const swiperRef = ref();
    const translateX = ref(0);
    watch(
      () => props.activeIndex,
      (val) => {
        activeSwiperIndex.value = val;
        translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
      }
    );
    watch(activeSwiperIndex, () => {
      emits("change", activeSwiperIndex.value);
    });
    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 = computed(() => {
      return { transform: `translateX(${translateX.value}px)` };
    });
    function handleTouchStart(event) {
      touchData.x = event.changedTouches[0].pageX;
      touchData.y = event.changedTouches[0].pageY;
    }
    const handleTouchMoveThrottle = 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 openBlock(), createElementBlock("div", {
        class: "swiper",
        ref_key: "swiperRef",
        ref: swiperRef
      }, [
        createElementVNode("div", {
          class: "swiper-item-container",
          style: normalizeStyle(swiperStyle.value),
          onTouchstart: handleTouchStart,
          onTouchmove: _cache[0] || (_cache[0] = //@ts-ignore
          (...args) => unref(handleTouchMoveThrottle) && unref(handleTouchMoveThrottle)(...args)),
          onTouchend: handleTouchEnd
        }, [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ], 36),
        swiperItemNumber.value > 1 ? (openBlock(), createElementBlock("div", _hoisted_1, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(swiperItemNumber.value, (item, index) => {
            return openBlock(), createElementBlock("div", {
              key: item,
              class: normalizeClass(["swiper-dots", [isActiveDot(index) ? "swiper-current-dots" : ""]])
            }, null, 2);
          }), 128))
        ])) : createCommentVNode("", true)
      ], 512);
    };
  }
});
export {
  _sfc_main as default
};
