import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useCallback, useEffect, Children, createElement } from "react";
import useEmblaCarousel from "embla-carousel-react";
import { CarouselProvider } from "./Carousel.context.mjs";
import { CarouselSlide } from "./CarouselSlide/CarouselSlide.mjs";
import { CarouselVariables } from "./CarouselVariables/CarouselVariables.mjs";
import { getChevronRotation } from "./get-chevron-rotation.mjs";
import classes from "./Carousel.module.css.mjs";
import { factory } from "../../../../../@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.mjs";
import { useProps } from "../../../../../@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.mjs";
import { useStyles } from "../../../../../@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.mjs";
import { useRandomClassName } from "../../../../../@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.mjs";
import { useDirection } from "../../../../../@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.mjs";
import { clamp } from "../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/utils/clamp/clamp.mjs";
import { UnstyledButton } from "../../../../../@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.mjs";
import { Box } from "../../../../../@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.mjs";
import { AccordionChevron } from "../../../../../@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.mjs";
import { createVarsResolver } from "../../../../../@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.mjs";
import { rem } from "../../../../../@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.mjs";
import { getSpacing } from "../../../../../@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.mjs";
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(
  (_, { height, controlSize, controlsOffset }) => ({
    root: {
      "--carousel-height": rem(height),
      "--carousel-control-size": rem(controlSize),
      "--carousel-controls-offset": getSpacing(controlsOffset)
    }
  })
);
const Carousel = factory((_props, ref) => {
  const props = 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({
    name: "Carousel",
    classes,
    props,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  const responsiveClassName = useRandomClassName();
  const { dir } = 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] = useState(0);
  const [slidesCount, setSlidesCount] = useState(0);
  const handleScroll = useCallback((index) => embla && embla.scrollTo(index), [embla]);
  const handleSelect = useCallback(() => {
    if (!embla) {
      return;
    }
    const slide = embla.selectedScrollSnap();
    setSelected(slide);
    slide !== selected && (onSlideChange == null ? void 0 : onSlideChange(slide));
  }, [embla, setSelected, onSlideChange, selected]);
  const handlePrevious = useCallback(() => {
    embla == null ? void 0 : embla.scrollPrev();
    onPreviousSlide == null ? void 0 : onPreviousSlide();
  }, [embla]);
  const handleNext = useCallback(() => {
    embla == null ? void 0 : embla.scrollNext();
    onNextSlide == null ? void 0 : onNextSlide();
  }, [embla]);
  const handleKeydown = useCallback(
    (event) => {
      if (withKeyboardEvents) {
        if (event.key === "ArrowRight") {
          event.preventDefault();
          handleNext();
        }
        if (event.key === "ArrowLeft") {
          event.preventDefault();
          handlePrevious();
        }
      }
    },
    [embla]
  );
  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]);
  useEffect(() => {
    if (embla) {
      embla.reInit();
      setSlidesCount(embla.scrollSnapList().length);
      setSelected(
        (currentSelected) => clamp(currentSelected, 0, Children.toArray(children).length - 1)
      );
    }
  }, [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__ */ createElement(
    UnstyledButton,
    {
      ...getStyles("indicator"),
      key: index,
      "data-active": index === selected || void 0,
      "aria-hidden": true,
      tabIndex: -1,
      onClick: () => handleScroll(index),
      "data-orientation": orientation
    }
  ));
  return /* @__PURE__ */ jsxs(CarouselProvider, { value: { getStyles, orientation }, children: [
    /* @__PURE__ */ jsx(CarouselVariables, { ...props, selector: `.${responsiveClassName}` }),
    /* @__PURE__ */ jsxs(
      Box,
      {
        ref,
        ...getStyles("root", { className: responsiveClassName }),
        ...others,
        mod: [{ orientation, "include-gap-in-size": includeGapInSize }, mod],
        onKeyDownCapture: handleKeydown,
        children: [
          /* @__PURE__ */ jsx("div", { ...getStyles("viewport"), ref: emblaRefElement, children: /* @__PURE__ */ jsx("div", { ...getStyles("container"), "data-orientation": orientation, children }) }),
          withIndicators && /* @__PURE__ */ jsx("div", { ...getStyles("indicators"), "data-orientation": orientation, children: indicators }),
          withControls && /* @__PURE__ */ jsxs("div", { ...getStyles("controls"), "data-orientation": orientation, children: [
            /* @__PURE__ */ jsx(
              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__ */ jsx(
                  AccordionChevron,
                  {
                    style: {
                      transform: `rotate(${getChevronRotation({
                        dir,
                        orientation,
                        direction: "previous"
                      })}deg)`
                    }
                  }
                )
              }
            ),
            /* @__PURE__ */ jsx(
              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__ */ jsx(
                  AccordionChevron,
                  {
                    style: {
                      transform: `rotate(${getChevronRotation({
                        dir,
                        orientation,
                        direction: "next"
                      })}deg)`
                    }
                  }
                )
              }
            )
          ] })
        ]
      }
    )
  ] });
});
Carousel.classes = classes;
Carousel.displayName = "@mantine/carousel/Carousel";
Carousel.Slide = CarouselSlide;
export {
  Carousel
};
