"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const getSize = require("../../core/utils/get-size/get-size.cjs");
const createVarsResolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
require("clsx");
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 ColorSwatch = require("../ColorSwatch/ColorSwatch.cjs");
const AlphaSlider = require("./AlphaSlider/AlphaSlider.cjs");
const ColorPicker_context = require("./ColorPicker.context.cjs");
const converters = require("./converters/converters.cjs");
const parsers = require("./converters/parsers.cjs");
const HueSlider = require("./HueSlider/HueSlider.cjs");
const Saturation = require("./Saturation/Saturation.cjs");
const Swatches = require("./Swatches/Swatches.cjs");
const ColorPicker_module_css = require("./ColorPicker.module.css.cjs");
const useUncontrolled = require("../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.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 defaultProps = {
  swatchesPerRow: 7,
  withPicker: true,
  focusable: true,
  size: "md",
  __staticSelector: "ColorPicker"
};
const varsResolver = createVarsResolver.createVarsResolver((_, { size, swatchesPerRow }) => ({
  wrapper: {
    "--cp-preview-size": getSize.getSize(size, "cp-preview-size"),
    "--cp-width": getSize.getSize(size, "cp-width"),
    "--cp-body-spacing": getSize.getSpacing(size),
    "--cp-swatch-size": `${100 / swatchesPerRow}%`,
    "--cp-thumb-size": getSize.getSize(size, "cp-thumb-size"),
    "--cp-saturation-height": getSize.getSize(size, "cp-saturation-height")
  }
}));
const ColorPicker = factory.factory((_props, ref) => {
  const props = useProps.useProps("ColorPicker", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    format,
    value,
    defaultValue,
    onChange,
    onChangeEnd,
    withPicker,
    size,
    saturationLabel,
    hueLabel,
    alphaLabel,
    focusable,
    swatches,
    swatchesPerRow,
    fullWidth,
    onColorSwatchClick,
    __staticSelector,
    mod,
    ...others
  } = props;
  const getStyles = useStyles.useStyles({
    name: __staticSelector,
    props,
    classes: ColorPicker_module_css.default,
    className,
    style,
    classNames,
    styles,
    unstyled,
    rootSelector: "wrapper",
    vars,
    varsResolver
  });
  const formatRef = React.useRef(format);
  const valueRef = React.useRef("");
  const scrubTimeoutRef = React.useRef(-1);
  const isScrubbingRef = React.useRef(false);
  const withAlpha = format === "hexa" || format === "rgba" || format === "hsla";
  const [_value, setValue, controlled] = useUncontrolled.useUncontrolled({
    value,
    defaultValue,
    finalValue: "#FFFFFF",
    onChange
  });
  const [parsed, setParsed] = React.useState(parsers.parseColor(_value));
  const startScrubbing = () => {
    window.clearTimeout(scrubTimeoutRef.current);
    isScrubbingRef.current = true;
  };
  const stopScrubbing = () => {
    window.clearTimeout(scrubTimeoutRef.current);
    scrubTimeoutRef.current = window.setTimeout(() => {
      isScrubbingRef.current = false;
    }, 200);
  };
  const handleChange = (color) => {
    setParsed((current) => {
      const next = { ...current, ...color };
      valueRef.current = converters.convertHsvaTo(formatRef.current, next);
      return next;
    });
    setValue(valueRef.current);
  };
  useDidUpdate.useDidUpdate(() => {
    if (parsers.isColorValid(value) && !isScrubbingRef.current) {
      setParsed(parsers.parseColor(value));
    }
  }, [value]);
  useDidUpdate.useDidUpdate(() => {
    formatRef.current = format;
    setValue(converters.convertHsvaTo(format, parsed));
  }, [format]);
  return /* @__PURE__ */ jsxRuntime.jsx(ColorPicker_context.ColorPickerProvider, { value: { getStyles, unstyled }, children: /* @__PURE__ */ jsxRuntime.jsxs(
    Box.Box,
    {
      ref,
      ...getStyles("wrapper"),
      size,
      mod: [{ "full-width": fullWidth }, mod],
      ...others,
      children: [
        withPicker && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            Saturation.Saturation,
            {
              value: parsed,
              onChange: handleChange,
              onChangeEnd: ({ s, v }) => onChangeEnd == null ? void 0 : onChangeEnd(converters.convertHsvaTo(formatRef.current, { ...parsed, s, v })),
              color: _value,
              size,
              focusable,
              saturationLabel,
              onScrubStart: startScrubbing,
              onScrubEnd: stopScrubbing
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("body"), children: [
            /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("sliders"), children: [
              /* @__PURE__ */ jsxRuntime.jsx(
                HueSlider.HueSlider,
                {
                  value: parsed.h,
                  onChange: (h) => handleChange({ h }),
                  onChangeEnd: (h) => onChangeEnd == null ? void 0 : onChangeEnd(converters.convertHsvaTo(formatRef.current, { ...parsed, h })),
                  size,
                  focusable,
                  "aria-label": hueLabel,
                  onScrubStart: startScrubbing,
                  onScrubEnd: stopScrubbing
                }
              ),
              withAlpha && /* @__PURE__ */ jsxRuntime.jsx(
                AlphaSlider.AlphaSlider,
                {
                  value: parsed.a,
                  onChange: (a) => handleChange({ a }),
                  onChangeEnd: (a) => {
                    onChangeEnd == null ? void 0 : onChangeEnd(converters.convertHsvaTo(formatRef.current, { ...parsed, a }));
                  },
                  size,
                  color: converters.convertHsvaTo("hex", parsed),
                  focusable,
                  "aria-label": alphaLabel,
                  onScrubStart: startScrubbing,
                  onScrubEnd: stopScrubbing
                }
              )
            ] }),
            withAlpha && /* @__PURE__ */ jsxRuntime.jsx(
              ColorSwatch.ColorSwatch,
              {
                color: _value,
                radius: "sm",
                size: "var(--cp-preview-size)",
                ...getStyles("preview")
              }
            )
          ] })
        ] }),
        Array.isArray(swatches) && /* @__PURE__ */ jsxRuntime.jsx(
          Swatches.Swatches,
          {
            data: swatches,
            swatchesPerRow,
            focusable,
            setValue,
            onChangeEnd: (color) => {
              const convertedColor = converters.convertHsvaTo(format, parsers.parseColor(color));
              onColorSwatchClick == null ? void 0 : onColorSwatchClick(convertedColor);
              onChangeEnd == null ? void 0 : onChangeEnd(convertedColor);
              if (!controlled) {
                setParsed(parsers.parseColor(color));
              }
            }
          }
        )
      ]
    }
  ) });
});
ColorPicker.classes = ColorPicker_module_css.default;
ColorPicker.displayName = "@mantine/core/ColorPicker";
exports.ColorPicker = ColorPicker;
