"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const rem = require("../../../core/utils/units-converters/rem.cjs");
require("clsx");
const MantineThemeProvider = require("../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const useProps = require("../../../core/MantineProvider/use-props/use-props.cjs");
const useStyles = require("../../../core/styles-api/use-styles/use-styles.cjs");
const Box = require("../../../core/Box/Box.cjs");
const factory = require("../../../core/factory/factory.cjs");
const ColorPicker_context = require("../ColorPicker.context.cjs");
const Thumb = require("../Thumb/Thumb.cjs");
const ColorPicker_module_css = require("../ColorPicker.module.css.cjs");
const useMove = require("../../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-move/use-move.cjs");
const useDidUpdate = require("../../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-did-update/use-did-update.cjs");
const useMergedRef = require("../../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-merged-ref/use-merged-ref.cjs");
const defaultProps = {};
const ColorSlider = factory.factory((_props, ref) => {
  var _a;
  const props = useProps.useProps("ColorSlider", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    onChange,
    onChangeEnd,
    maxValue,
    round,
    size = "md",
    focusable = true,
    value,
    overlays,
    thumbColor = "transparent",
    onScrubStart,
    onScrubEnd,
    __staticSelector = "ColorPicker",
    ...others
  } = props;
  const _getStyles = useStyles.useStyles({
    name: __staticSelector,
    classes: ColorPicker_module_css.default,
    props,
    className,
    style,
    classNames,
    styles,
    unstyled
  });
  const ctxGetStyles = (_a = ColorPicker_context.useColorPickerContext()) == null ? void 0 : _a.getStyles;
  const getStyles = ctxGetStyles || _getStyles;
  const theme = MantineThemeProvider.useMantineTheme();
  const [position, setPosition] = React.useState({ y: 0, x: value / maxValue });
  const positionRef = React.useRef(position);
  const getChangeValue = (val) => round ? Math.round(val * maxValue) : val * maxValue;
  const { ref: sliderRef } = useMove.useMove(
    ({ x, y }) => {
      positionRef.current = { x, y };
      onChange == null ? void 0 : onChange(getChangeValue(x));
    },
    {
      onScrubEnd: () => {
        const { x } = positionRef.current;
        onChangeEnd == null ? void 0 : onChangeEnd(getChangeValue(x));
        onScrubEnd == null ? void 0 : onScrubEnd();
      },
      onScrubStart
    }
  );
  useDidUpdate.useDidUpdate(() => {
    setPosition({ y: 0, x: value / maxValue });
  }, [value]);
  const handleArrow = (event, pos) => {
    event.preventDefault();
    const _position = useMove.clampUseMovePosition(pos);
    onChange == null ? void 0 : onChange(getChangeValue(_position.x));
    onChangeEnd == null ? void 0 : onChangeEnd(getChangeValue(_position.x));
  };
  const handleKeyDown = (event) => {
    switch (event.key) {
      case "ArrowRight": {
        handleArrow(event, { x: position.x + 0.05, y: position.y });
        break;
      }
      case "ArrowLeft": {
        handleArrow(event, { x: position.x - 0.05, y: position.y });
        break;
      }
    }
  };
  const layers = overlays.map((overlay, index) => /* @__PURE__ */ React.createElement("div", { ...getStyles("sliderOverlay"), style: overlay, key: index }));
  return /* @__PURE__ */ jsxRuntime.jsxs(
    Box.Box,
    {
      ...others,
      ref: useMergedRef.useMergedRef(sliderRef, ref),
      ...getStyles("slider"),
      role: "slider",
      "aria-valuenow": value,
      "aria-valuemax": maxValue,
      "aria-valuemin": 0,
      tabIndex: focusable ? 0 : -1,
      onKeyDown: handleKeyDown,
      "data-focus-ring": theme.focusRing,
      __vars: {
        "--cp-thumb-size": `var(--cp-thumb-size-${size})`
      },
      children: [
        layers,
        /* @__PURE__ */ jsxRuntime.jsx(
          Thumb.Thumb,
          {
            position,
            ...getStyles("thumb", { style: { top: rem.rem(1), background: thumbColor } })
          }
        )
      ]
    }
  );
});
ColorSlider.displayName = "@mantine/core/ColorSlider";
exports.ColorSlider = ColorSlider;
