"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 useResolvedStylesApi = require("../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs");
const useStyles = require("../../core/styles-api/use-styles/use-styles.cjs");
const useProps = require("../../core/MantineProvider/use-props/use-props.cjs");
const factory = require("../../core/factory/factory.cjs");
const ActionIcon = require("../ActionIcon/ActionIcon.cjs");
const ColorPicker = require("../ColorPicker/ColorPicker.cjs");
const converters = require("../ColorPicker/converters/converters.cjs");
const parsers = require("../ColorPicker/converters/parsers.cjs");
const ColorSwatch = require("../ColorSwatch/ColorSwatch.cjs");
const Input = require("../Input/Input.cjs");
const useInputProps = require("../Input/use-input-props.cjs");
const InputBase = require("../InputBase/InputBase.cjs");
const Popover = require("../Popover/Popover.cjs");
const EyeDropperIcon = require("./EyeDropperIcon.cjs");
const ColorInput_module_css = require("./ColorInput.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 useEyeDropper = require("../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-eye-dropper/use-eye-dropper.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 = {
  format: "hex",
  fixOnBlur: true,
  withPreview: true,
  swatchesPerRow: 7,
  withPicker: true,
  popoverProps: { transitionProps: { transition: "fade", duration: 0 } },
  withEyeDropper: true
};
const varsResolver = createVarsResolver.createVarsResolver((_, { size }) => ({
  eyeDropperIcon: {
    "--ci-eye-dropper-icon-size": getSize.getSize(size, "ci-eye-dropper-icon-size")
  },
  colorPreview: {
    "--ci-preview-size": getSize.getSize(size, "ci-preview-size")
  }
}));
const ColorInput = factory.factory((_props, ref) => {
  const props = useProps.useProps("ColorInput", defaultProps, _props);
  const {
    classNames,
    styles,
    unstyled,
    disallowInput,
    fixOnBlur,
    popoverProps,
    withPreview,
    withEyeDropper,
    eyeDropperIcon,
    closeOnColorSwatchClick,
    eyeDropperButtonProps,
    value,
    defaultValue,
    onChange,
    onChangeEnd,
    onClick,
    onFocus,
    onBlur,
    inputProps,
    format,
    wrapperProps,
    readOnly,
    withPicker,
    swatches,
    disabled,
    leftSection,
    rightSection,
    swatchesPerRow,
    ...others
  } = useInputProps.useInputProps("ColorInput", defaultProps, _props);
  const getStyles = useStyles.useStyles({
    name: "ColorInput",
    props,
    classes: ColorInput_module_css.default,
    classNames,
    styles,
    unstyled,
    rootSelector: "wrapper",
    vars: props.vars,
    varsResolver
  });
  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi.useResolvedStylesApi({
    classNames,
    styles,
    props
  });
  const [dropdownOpened, setDropdownOpened] = React.useState(false);
  const [lastValidValue, setLastValidValue] = React.useState("");
  const [_value, setValue] = useUncontrolled.useUncontrolled({
    value,
    defaultValue,
    finalValue: "",
    onChange
  });
  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper.useEyeDropper();
  const eyeDropper = /* @__PURE__ */ jsxRuntime.jsx(
    ActionIcon.ActionIcon,
    {
      ...eyeDropperButtonProps,
      ...getStyles("eyeDropperButton", {
        className: eyeDropperButtonProps == null ? void 0 : eyeDropperButtonProps.className,
        style: eyeDropperButtonProps == null ? void 0 : eyeDropperButtonProps.style
      }),
      variant: "subtle",
      color: "gray",
      size: inputProps.size,
      unstyled,
      onClick: () => openEyeDropper().then((payload) => {
        if (payload == null ? void 0 : payload.sRGBHex) {
          const color = converters.convertHsvaTo(format, parsers.parseColor(payload.sRGBHex));
          setValue(color);
          onChangeEnd == null ? void 0 : onChangeEnd(color);
        }
      }).catch(() => {
      }),
      children: eyeDropperIcon || /* @__PURE__ */ jsxRuntime.jsx(EyeDropperIcon.EyeDropperIcon, { ...getStyles("eyeDropperIcon") })
    }
  );
  const handleInputFocus = (event) => {
    onFocus == null ? void 0 : onFocus(event);
    setDropdownOpened(true);
  };
  const handleInputBlur = (event) => {
    fixOnBlur && setValue(lastValidValue);
    onBlur == null ? void 0 : onBlur(event);
    setDropdownOpened(false);
  };
  const handleInputClick = (event) => {
    onClick == null ? void 0 : onClick(event);
    setDropdownOpened(true);
  };
  React.useEffect(() => {
    if (parsers.isColorValid(_value) || _value.trim() === "") {
      setLastValidValue(_value);
    }
  }, [_value]);
  useDidUpdate.useDidUpdate(() => {
    if (parsers.isColorValid(_value)) {
      setValue(converters.convertHsvaTo(format, parsers.parseColor(_value)));
    }
  }, [format]);
  return /* @__PURE__ */ jsxRuntime.jsx(
    Input.Input.Wrapper,
    {
      ...wrapperProps,
      classNames: resolvedClassNames,
      styles: resolvedStyles,
      __staticSelector: "ColorInput",
      children: /* @__PURE__ */ jsxRuntime.jsxs(
        Popover.Popover,
        {
          __staticSelector: "ColorInput",
          position: "bottom-start",
          offset: 5,
          opened: dropdownOpened,
          ...popoverProps,
          classNames: resolvedClassNames,
          styles: resolvedStyles,
          unstyled,
          withRoles: false,
          disabled: readOnly || withPicker === false && (!Array.isArray(swatches) || swatches.length === 0),
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
              Input.Input,
              {
                autoComplete: "off",
                ...others,
                ...inputProps,
                classNames: resolvedClassNames,
                styles: resolvedStyles,
                disabled,
                ref,
                __staticSelector: "ColorInput",
                onFocus: handleInputFocus,
                onBlur: handleInputBlur,
                onClick: handleInputClick,
                spellCheck: false,
                value: _value,
                onChange: (event) => {
                  const inputValue = event.currentTarget.value;
                  setValue(inputValue);
                  if (parsers.isColorValid(inputValue)) {
                    onChangeEnd == null ? void 0 : onChangeEnd(converters.convertHsvaTo(format, parsers.parseColor(inputValue)));
                  }
                },
                leftSection: leftSection || (withPreview ? /* @__PURE__ */ jsxRuntime.jsx(
                  ColorSwatch.ColorSwatch,
                  {
                    color: parsers.isColorValid(_value) ? _value : "#fff",
                    size: "var(--ci-preview-size)",
                    ...getStyles("colorPreview")
                  }
                ) : null),
                readOnly: disallowInput || readOnly,
                pointer: disallowInput,
                unstyled,
                rightSection: rightSection || (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)
              }
            ) }),
            /* @__PURE__ */ jsxRuntime.jsx(
              Popover.Popover.Dropdown,
              {
                onMouseDown: (event) => event.preventDefault(),
                className: ColorInput_module_css.default.dropdown,
                children: /* @__PURE__ */ jsxRuntime.jsx(
                  ColorPicker.ColorPicker,
                  {
                    __staticSelector: "ColorInput",
                    value: _value,
                    onChange: setValue,
                    onChangeEnd,
                    format,
                    swatches,
                    swatchesPerRow,
                    withPicker,
                    size: inputProps.size,
                    focusable: false,
                    unstyled,
                    styles: resolvedStyles,
                    classNames: resolvedClassNames,
                    onColorSwatchClick: () => closeOnColorSwatchClick && setDropdownOpened(false)
                  }
                )
              }
            )
          ]
        }
      )
    }
  );
});
ColorInput.classes = InputBase.InputBase.classes;
ColorInput.displayName = "@mantine/core/ColorInput";
exports.ColorInput = ColorInput;
