import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { getSize } from "../../core/utils/get-size/get-size.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import "clsx";
import { useResolvedStylesApi } from "../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { ActionIcon } from "../ActionIcon/ActionIcon.mjs";
import { ColorPicker } from "../ColorPicker/ColorPicker.mjs";
import { convertHsvaTo } from "../ColorPicker/converters/converters.mjs";
import { parseColor, isColorValid } from "../ColorPicker/converters/parsers.mjs";
import { ColorSwatch } from "../ColorSwatch/ColorSwatch.mjs";
import { Input } from "../Input/Input.mjs";
import { useInputProps } from "../Input/use-input-props.mjs";
import { InputBase } from "../InputBase/InputBase.mjs";
import { Popover } from "../Popover/Popover.mjs";
import { EyeDropperIcon } from "./EyeDropperIcon.mjs";
import classes from "./ColorInput.module.css.mjs";
import { useUncontrolled } from "../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.mjs";
import { useEyeDropper } from "../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-eye-dropper/use-eye-dropper.mjs";
import { useDidUpdate } from "../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-did-update/use-did-update.mjs";
const defaultProps = {
  format: "hex",
  fixOnBlur: true,
  withPreview: true,
  swatchesPerRow: 7,
  withPicker: true,
  popoverProps: { transitionProps: { transition: "fade", duration: 0 } },
  withEyeDropper: true
};
const varsResolver = createVarsResolver((_, { size }) => ({
  eyeDropperIcon: {
    "--ci-eye-dropper-icon-size": getSize(size, "ci-eye-dropper-icon-size")
  },
  colorPreview: {
    "--ci-preview-size": getSize(size, "ci-preview-size")
  }
}));
const ColorInput = factory((_props, ref) => {
  const props = 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("ColorInput", defaultProps, _props);
  const getStyles = useStyles({
    name: "ColorInput",
    props,
    classes,
    classNames,
    styles,
    unstyled,
    rootSelector: "wrapper",
    vars: props.vars,
    varsResolver
  });
  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
    classNames,
    styles,
    props
  });
  const [dropdownOpened, setDropdownOpened] = useState(false);
  const [lastValidValue, setLastValidValue] = useState("");
  const [_value, setValue] = useUncontrolled({
    value,
    defaultValue,
    finalValue: "",
    onChange
  });
  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();
  const eyeDropper = /* @__PURE__ */ jsx(
    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 = convertHsvaTo(format, parseColor(payload.sRGBHex));
          setValue(color);
          onChangeEnd == null ? void 0 : onChangeEnd(color);
        }
      }).catch(() => {
      }),
      children: eyeDropperIcon || /* @__PURE__ */ jsx(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);
  };
  useEffect(() => {
    if (isColorValid(_value) || _value.trim() === "") {
      setLastValidValue(_value);
    }
  }, [_value]);
  useDidUpdate(() => {
    if (isColorValid(_value)) {
      setValue(convertHsvaTo(format, parseColor(_value)));
    }
  }, [format]);
  return /* @__PURE__ */ jsx(
    Input.Wrapper,
    {
      ...wrapperProps,
      classNames: resolvedClassNames,
      styles: resolvedStyles,
      __staticSelector: "ColorInput",
      children: /* @__PURE__ */ jsxs(
        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__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
              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 (isColorValid(inputValue)) {
                    onChangeEnd == null ? void 0 : onChangeEnd(convertHsvaTo(format, parseColor(inputValue)));
                  }
                },
                leftSection: leftSection || (withPreview ? /* @__PURE__ */ jsx(
                  ColorSwatch,
                  {
                    color: 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__ */ jsx(
              Popover.Dropdown,
              {
                onMouseDown: (event) => event.preventDefault(),
                className: classes.dropdown,
                children: /* @__PURE__ */ jsx(
                  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.classes;
ColorInput.displayName = "@mantine/core/ColorInput";
export {
  ColorInput
};
