"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const useEmblaCarousel = require("embla-carousel-react");
const Carousel_context = require("./Carousel.context.cjs");
const CarouselSlide = require("./CarouselSlide/CarouselSlide.cjs");
const CarouselVariables = require("./CarouselVariables/CarouselVariables.cjs");
const getChevronRotation = require("./get-chevron-rotation.cjs");
const Carousel_module_css = require("./Carousel.module.css.cjs");
const factory = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/factory/factory.cjs");
const useProps = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.cjs");
const useStyles = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/styles-api/use-styles/use-styles.cjs");
const useRandomClassname = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/use-random-classname/use-random-classname.cjs");
const DirectionProvider = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/DirectionProvider/DirectionProvider.cjs");
const clamp = require("../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/utils/clamp/clamp.cjs");
const UnstyledButton = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.cjs");
const Box = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.cjs");
const AccordionChevron = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Accordion/AccordionChevron.cjs");
const createVarsResolver = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const rem = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/utils/units-converters/rem.cjs");
const getSize = require("../../../../../@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/utils/get-size/get-size.cjs");
const defaultProps = {
  controlSize: 26,
  controlsOffset: "sm",
  slideSize: "100%",
  slideGap: 0,
  orientation: "horizontal",
  align: "center",
  slidesToScroll: 1,
  includeGapInSize: true,
  draggable: true,
  dragFree: false,
  loop: false,
  speed: 10,
  initialSlide: 0,
  inViewThreshold: 0,
  withControls: true,
  withIndicators: false,
  skipSnaps: false,
  containScroll: "",
  withKeyboardEvents: true
};
const varsResolver = createVarsResolver.createVarsResolver(
  (_, { height, controlSize, controlsOffset }) => ({
    root: {
      "--carousel-height": rem.rem(height),
      "--carousel-control-size": rem.rem(controlSize),
      "--carousel-controls-offset": getSize.getSpacing(controlsOffset)
    }
  })
);
const Carousel = factory.factory((_props, ref) => {
  const props = useProps.useProps("Carousel", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    children,
    getEmblaApi,
    onNextSlide,
    onPreviousSlide,
    onSlideChange,
    nextControlProps,
    previousControlProps,
    controlSize,
    controlsOffset,
    slideSize,
    slideGap,
    orientation,
    height,
    align,
    slidesToScroll,
    includeGapInSize,
    draggable,
    dragFree,
    loop,
    speed,
    initialSlide,
    inViewThreshold,
    withControls,
    withIndicators,
    plugins,
    nextControlIcon,
    previousControlIcon,
    skipSnaps,
    containScroll,
    withKeyboardEvents,
    mod,
    ...others
  } = props;
  const getStyles = useStyles.useStyles({
    name: "Carousel",
    classes: Carousel_module_css.default,
    props,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  const responsiveClassName = useRandomClassname.useRandomClassName();
  const { dir } = DirectionProvider.useDirection();
  const [emblaRefElement, embla] = useEmblaCarousel(
    {
      axis: orientation === "horizontal" ? "x" : "y",
      direction: orientation === "horizontal" ? dir : void 0,
      startIndex: initialSlide,
      loop,
      align,
      slidesToScroll,
      draggable,
      dragFree,
      speed,
      inViewThreshold,
      skipSnaps,
      containScroll
    },
    plugins
  );
  const [selected, setSelected] = React.useState(0);
  const [slidesCount, setSlidesCount] = React.useState(0);
  const handleScroll = React.useCallback((index) => embla && embla.scrollTo(index), [embla]);
  const handleSelect = React.useCallback(() => {
    if (!embla) {
      return;
    }
    const slide = embla.selectedScrollSnap();
    setSelected(slide);
    slide !== selected && (onSlideChange == null ? void 0 : onSlideChange(slide));
  }, [embla, setSelected, onSlideChange, selected]);
  const handlePrevious = React.useCallback(() => {
    embla == null ? void 0 : embla.scrollPrev();
    onPreviousSlide == null ? void 0 : onPreviousSlide();
  }, [embla]);
  const handleNext = React.useCallback(() => {
    embla == null ? void 0 : embla.scrollNext();
    onNextSlide == null ? void 0 : onNextSlide();
  }, [embla]);
  const handleKeydown = React.useCallback(
    (event) => {
      if (withKeyboardEvents) {
        if (event.key === "ArrowRight") {
          event.preventDefault();
          handleNext();
        }
        if (event.key === "ArrowLeft") {
          event.preventDefault();
          handlePrevious();
        }
      }
    },
    [embla]
  );
  React.useEffect(() => {
    if (embla) {
      getEmblaApi == null ? void 0 : getEmblaApi(embla);
      handleSelect();
      setSlidesCount(embla.scrollSnapList().length);
      embla.on("select", handleSelect);
      return () => {
        embla.off("select", handleSelect);
      };
    }
    return void 0;
  }, [embla, slidesToScroll, handleSelect]);
  React.useEffect(() => {
    if (embla) {
      embla.reInit();
      setSlidesCount(embla.scrollSnapList().length);
      setSelected(
        (currentSelected) => clamp.clamp(currentSelected, 0, React.Children.toArray(children).length - 1)
      );
    }
  }, [React.Children.toArray(children).length, slidesToScroll]);
  const canScrollPrev = (embla == null ? void 0 : embla.canScrollPrev()) || false;
  const canScrollNext = (embla == null ? void 0 : embla.canScrollNext()) || false;
  const indicators = Array(slidesCount).fill(0).map((_, index) => /* @__PURE__ */ React.createElement(
    UnstyledButton.UnstyledButton,
    {
      ...getStyles("indicator"),
      key: index,
      "data-active": index === selected || void 0,
      "aria-hidden": true,
      tabIndex: -1,
      onClick: () => handleScroll(index),
      "data-orientation": orientation
    }
  ));
  return /* @__PURE__ */ jsxRuntime.jsxs(Carousel_context.CarouselProvider, { value: { getStyles, orientation }, children: [
    /* @__PURE__ */ jsxRuntime.jsx(CarouselVariables.CarouselVariables, { ...props, selector: `.${responsiveClassName}` }),
    /* @__PURE__ */ jsxRuntime.jsxs(
      Box.Box,
      {
        ref,
        ...getStyles("root", { className: responsiveClassName }),
        ...others,
        mod: [{ orientation, "include-gap-in-size": includeGapInSize }, mod],
        onKeyDownCapture: handleKeydown,
        children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("viewport"), ref: emblaRefElement, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("container"), "data-orientation": orientation, children }) }),
          withIndicators && /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("indicators"), "data-orientation": orientation, children: indicators }),
          withControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("controls"), "data-orientation": orientation, children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              UnstyledButton.UnstyledButton,
              {
                ...previousControlProps,
                ...getStyles("control", {
                  className: previousControlProps == null ? void 0 : previousControlProps.className,
                  style: previousControlProps == null ? void 0 : previousControlProps.style
                }),
                onClick: (event) => {
                  var _a;
                  handlePrevious();
                  (_a = previousControlProps == null ? void 0 : previousControlProps.onClick) == null ? void 0 : _a.call(previousControlProps, event);
                },
                "data-inactive": !canScrollPrev || void 0,
                tabIndex: canScrollPrev ? 0 : -1,
                children: typeof previousControlIcon !== "undefined" ? previousControlIcon : /* @__PURE__ */ jsxRuntime.jsx(
                  AccordionChevron.AccordionChevron,
                  {
                    style: {
                      transform: `rotate(${getChevronRotation.getChevronRotation({
                        dir,
                        orientation,
                        direction: "previous"
                      })}deg)`
                    }
                  }
                )
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(
              UnstyledButton.UnstyledButton,
              {
                ...getStyles("control", {
                  className: nextControlProps == null ? void 0 : nextControlProps.className,
                  style: nextControlProps == null ? void 0 : nextControlProps.style
                }),
                ...nextControlProps,
                onClick: (event) => {
                  var _a;
                  handleNext();
                  (_a = nextControlProps == null ? void 0 : nextControlProps.onClick) == null ? void 0 : _a.call(nextControlProps, event);
                },
                "data-inactive": !canScrollNext || void 0,
                tabIndex: canScrollNext ? 0 : -1,
                children: typeof nextControlIcon !== "undefined" ? nextControlIcon : /* @__PURE__ */ jsxRuntime.jsx(
                  AccordionChevron.AccordionChevron,
                  {
                    style: {
                      transform: `rotate(${getChevronRotation.getChevronRotation({
                        dir,
                        orientation,
                        direction: "next"
                      })}deg)`
                    }
                  }
                )
              }
            )
          ] })
        ]
      }
    )
  ] });
});
Carousel.classes = Carousel_module_css.default;
Carousel.displayName = "@mantine/carousel/Carousel";
Carousel.Slide = CarouselSlide.CarouselSlide;
exports.Carousel = Carousel;
