import { defineComponent, ref, computed, unref, shallowRef, onMounted, nextTick, onBeforeUnmount, provide, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import '../../../utils/index.mjs';
import { PsIcon } from '../../icon/index.mjs';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import { carouselProps } from './carousel.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { isString } from '@vue/shared';
import { debugWarn } from '../../../utils/error.mjs';
import { carouselContextKey } from '../../../tokens/carousel.mjs';

const _hoisted_1 = { key: 0 };
const __default__ = {
  name: "PsCarousel"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: carouselProps,
  setup(__props, { expose }) {
    const props = __props;
    const ns = useNamespace("carousel");
    const COMPONENT_NAME = "PsCarousel";
    const THROTTLE_TIME = 300;
    const activeIndex = ref(-1);
    const timer = ref(null);
    const hover = ref(false);
    const root = ref();
    const items = ref([]);
    const arrowDisplay = computed(() => props.arrow !== "never" && !unref(isVertical));
    const hasLabel = computed(() => {
      return items.value.some((item) => item.props.label.toString().length > 0);
    });
    const carouselClasses = computed(() => {
      const classes = [ns.b(), ns.m(props.direction)];
      if (unref(isCardType)) {
        classes.push(ns.m("card"));
      }
      return classes;
    });
    const indicatorsClasses = computed(() => {
      const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
      if (hasLabel.value) {
        classes.push(ns.em("indicators", "labels"));
      }
      if (props.indicatorPosition === "outside" || unref(isCardType)) {
        classes.push(ns.em("indicators", "outside"));
      }
      return classes;
    });
    const isCardType = computed(() => props.type === "card");
    const isVertical = computed(() => props.direction === "vertical");
    function pauseTimer() {
      if (timer.value) {
        clearInterval(timer.value);
        timer.value = null;
      }
    }
    function startTimer() {
      if (props.interval <= 0 || !props.autoplay || timer.value)
        return;
      timer.value = setInterval(() => playSlides(), props.interval);
    }
    const playSlides = () => {
      if (activeIndex.value < items.value.length - 1) {
        activeIndex.value = activeIndex.value + 1;
      } else if (props.loop) {
        activeIndex.value = 0;
      }
    };
    function setActiveItem(index) {
      if (isString(index)) {
        const filteredItems = items.value.filter((item) => item.props.name === index);
        if (filteredItems.length > 0) {
          index = items.value.indexOf(filteredItems[0]);
        }
      }
      index = Number(index);
      if (Number.isNaN(index) || index !== Math.floor(index)) {
        debugWarn(COMPONENT_NAME, "index must be integer.");
        return;
      }
      const itemCount = items.value.length;
      const oldIndex = activeIndex.value;
      if (index < 0) {
        activeIndex.value = props.loop ? itemCount - 1 : 0;
      } else if (index >= itemCount) {
        activeIndex.value = props.loop ? 0 : itemCount - 1;
      } else {
        activeIndex.value = index;
      }
      if (oldIndex === activeIndex.value) {
        resetItemPosition(oldIndex);
      }
    }
    function resetItemPosition(oldIndex) {
      items.value.forEach((item, index) => {
        item.translateItem(index, activeIndex.value, oldIndex);
      });
    }
    function addItem(item) {
      items.value.push(item);
    }
    function removeItem(uid) {
      const index = items.value.findIndex((item) => item.uid === uid);
      if (index !== -1) {
        items.value.splice(index, 1);
        if (activeIndex.value === index)
          next();
      }
    }
    function next() {
      setActiveItem(activeIndex.value + 1);
    }
    const resizeObserver = shallowRef();
    onMounted(async () => {
      await nextTick();
      resizeObserver.value = useResizeObserver(root.value, () => {
        resetItemPosition();
      });
      if (props.initialIndex < items.value.length && props.initialIndex >= 0) {
        activeIndex.value = props.initialIndex;
      }
      startTimer();
    });
    onBeforeUnmount(() => {
      pauseTimer();
      if (root.value && resizeObserver.value)
        resizeObserver.value.stop();
    });
    provide(carouselContextKey, {
      root,
      isCardType,
      isVertical,
      items,
      loop: props.loop,
      addItem,
      removeItem,
      setActiveItem
    });
    expose({
      setActiveItem
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "root",
        ref: root,
        class: normalizeClass(unref(carouselClasses))
      }, [
        createElementVNode("div", {
          class: normalizeClass(unref(ns).e("container")),
          style: normalizeStyle({ height: _ctx.height })
        }, [
          createElementVNode("button", {
            type: "button",
            class: normalizeClass([unref(ns).e("arrow"), unref(ns).em("arrow", "left")])
          }, [
            createVNode(unref(PsIcon), null, {
              default: withCtx(() => [
                createVNode(unref(ArrowLeft))
              ]),
              _: 1
            })
          ], 2),
          createElementVNode("button", {
            type: "button",
            class: normalizeClass([unref(ns).e("arrow"), unref(ns).em("arrow", "right")])
          }, [
            createVNode(unref(PsIcon), null, {
              default: withCtx(() => [
                createVNode(unref(ArrowRight))
              ]),
              _: 1
            })
          ], 2),
          renderSlot(_ctx.$slots, "default")
        ], 6),
        _ctx.indicatorPosition !== "none" ? (openBlock(), createElementBlock("ul", {
          key: 0,
          class: normalizeClass(unref(indicatorsClasses))
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
            return openBlock(), createElementBlock("li", {
              key: index,
              class: normalizeClass([
                unref(ns).e("indicator"),
                unref(ns).em("indicator", _ctx.direction),
                unref(ns).is("active", index === activeIndex.value)
              ])
            }, [
              createElementVNode("button", {
                class: normalizeClass(unref(ns).e("button"))
              }, [
                unref(hasLabel) ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(item.props.label), 1)) : createCommentVNode("v-if", true)
              ], 2)
            ], 2);
          }), 128))
        ], 2)) : createCommentVNode("v-if", true)
      ], 2);
    };
  }
});
var Carousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/meng/workspace/element-ps/packages/components/carousel/src/carousel.vue"]]);

export { Carousel as default };
//# sourceMappingURL=carousel2.mjs.map
