import { watch, toRef, createVNode } from "vue";
import "./styles/carousel.scss";
import { makePaperProps, usePaper } from "../../composables/paper/index.mjs";
import { makeGroupProps, useGroup } from "../../composables/group/index.mjs";
import { CarouselActivator } from "./carousel-activator.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
import { createSymbol } from "../../utils/symbol.mjs";
const CarouselKey = createSymbol("carousel");
const Carousel = defineComponent({
  name: "VeCarousel",
  props: {
    autoplay: Boolean,
    interval: {
      type: [Number, String],
      default: 6e3,
      validator: (value) => value > 0
    },
    ...makeGroupProps({
      mandatory: "force"
    }),
    ...makePaperProps({
      variant: "text",
      size: void 0,
      density: void 0
    })
  },
  emits: {
    "update:modelValue": (_value) => true
  },
  setup(props, {
    slots
  }) {
    const {
      paperStyles,
      paperClasses
    } = usePaper(props);
    const {
      isSelected,
      select,
      selected,
      next,
      items
    } = useGroup(props, CarouselKey);
    let slideTimeout;
    const restartTimeout = () => {
      slideTimeout && clearTimeout(slideTimeout);
      slideTimeout = void 0;
      window.requestAnimationFrame(() => {
        if (!props.autoplay)
          return;
        slideTimeout = window.setTimeout(next, +props.interval > 0 ? +props.interval : 6e3);
      });
    };
    watch([selected, toRef(props, "autoplay"), toRef(props, "interval")], restartTimeout);
    return () => createVNode(props.tag, {
      "class": ["ve-carousel", paperClasses.value],
      "style": paperStyles.value
    }, {
      default: () => {
        var _a;
        return [(_a = slots.default) == null ? void 0 : _a.call(slots), createVNode("div", {
          "class": "ve-carousel__controls"
        }, [items.value.map((v) => createVNode(CarouselActivator, {
          "active": isSelected(v.id),
          "onClick": () => select(v.id, true)
        }, null))])];
      }
    });
  }
});
export {
  Carousel,
  CarouselKey
};
//# sourceMappingURL=carousel.mjs.map
