import { defineComponent, ref, watchEffect, openBlock, createElementBlock, createElementVNode, renderSlot, createVNode, unref, createCommentVNode, normalizeStyle } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import { MeSvgIcon } from '../../svg-icon/index.mjs';

"use strict";
const _hoisted_1 = { class: "me-swiper" };
const __default__ = defineComponent({
  name: "me-swiper"
});
var script = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    moveOffset: { type: Number, required: false, default: 100 },
    customStyle: { type: Object, required: false }
  },
  setup(__props) {
    const props = __props;
    const wrapperRef = ref();
    const listRef = ref();
    const offsetWidth = ref(0);
    let offset = 0;
    const diffWidth = ref(1);
    let listWidth = ref(0);
    let wrapperWidth = ref(0);
    const text = ref("");
    useResizeObserver(listRef, (entries) => {
      const entry = entries[0];
      const { width, height } = entry.contentRect;
      listWidth.value = width;
      text.value = `width: ${width}, height: ${height}`;
    });
    useResizeObserver(wrapperRef, (entries) => {
      const entry = entries[0];
      const { width, height } = entry.contentRect;
      wrapperWidth.value = width;
    });
    watchEffect(() => {
      diffWidth.value = wrapperWidth.value - listWidth.value;
    });
    const handleToggle = (type) => {
      const width = diffWidth.value;
      const itemWidth = props.moveOffset;
      if (type === "left") {
        if (offset + itemWidth > 0) {
          offset = 0;
        } else {
          offset += itemWidth;
        }
      }
      if (type === "right") {
        if (offset - itemWidth <= width) {
          offset = width;
        } else {
          offset -= itemWidth;
        }
      }
      offsetWidth.value = offset;
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode(
          "div",
          {
            ref_key: "wrapperRef",
            ref: wrapperRef,
            class: "wrapper"
          },
          [
            offsetWidth.value < 0 ? (openBlock(), createElementBlock("div", {
              key: 0,
              onClick: _cache[0] || (_cache[0] = ($event) => handleToggle("left")),
              class: "toggle toggle-left"
            }, [
              renderSlot(_ctx.$slots, "left", {}, () => [
                createVNode(unref(MeSvgIcon), {
                  size: 24,
                  color: "#dcdfe6",
                  name: "ri-arrow-right-s-line"
                })
              ])
            ])) : createCommentVNode("v-if", true),
            offsetWidth.value > diffWidth.value ? (openBlock(), createElementBlock("div", {
              key: 1,
              onClick: _cache[1] || (_cache[1] = ($event) => handleToggle("right")),
              class: "toggle toggle-right"
            }, [
              renderSlot(_ctx.$slots, "right", {}, () => [
                createVNode(unref(MeSvgIcon), {
                  size: 24,
                  color: "#dcdfe6",
                  name: "ri-arrow-right-s-line"
                })
              ])
            ])) : createCommentVNode("v-if", true),
            createElementVNode(
              "div",
              {
                style: normalizeStyle({ transform: `translateX(${offsetWidth.value}px)`, ...__props.customStyle }),
                ref_key: "listRef",
                ref: listRef,
                class: "coupon-list"
              },
              [
                renderSlot(_ctx.$slots, "default")
              ],
              4
              /* STYLE */
            )
          ],
          512
          /* NEED_PATCH */
        )
      ]);
    };
  }
});

export { script as default };
//# sourceMappingURL=swiper.vue2.mjs.map
