import {
  __objRest,
  __spreadValues
} from "./chunk-CRTRMMJ7.js";

// src/atoms/auto-sizing-input.tsx
import { Box } from "@radix-ui/themes";
import {
  forwardRef,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState
} from "react";
import { jsx } from "react/jsx-runtime";
var useTextWidth = (text, font) => {
  const [textWidth, setTextWidth] = useState(0);
  useEffect(() => {
    if (!text) {
      setTextWidth(0);
      return;
    }
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    if (!context) {
      setTextWidth(0);
      return;
    }
    context.font = font;
    const width = Math.ceil(context.measureText(text).width);
    setTextWidth(width);
  }, [text, font]);
  return textWidth;
};
var getFontString = (element) => {
  if (!element) return "14px sans-serif";
  if (typeof window === "undefined") return "14px sans-serif";
  const computedStyle = window.getComputedStyle(element);
  const fontSize = computedStyle.fontSize || "14px";
  const fontFamily = computedStyle.fontFamily || "sans-serif";
  const fontWeight = computedStyle.fontWeight || "normal";
  const fontStyle = computedStyle.fontStyle || "normal";
  return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
};
var AutoSizingInput = forwardRef(
  (_a, ref) => {
    var _b = _a, {
      value: externalValue,
      onChangeValue,
      onChange,
      maxWidth,
      minWidth
    } = _b, rest = __objRest(_b, [
      "value",
      "onChangeValue",
      "onChange",
      "maxWidth",
      "minWidth"
    ]);
    const isControlled = externalValue !== void 0;
    const [internalValue, setInternalValue] = useState(externalValue || "");
    const value = isControlled ? externalValue : internalValue;
    const defaultRef = useRef(null);
    const inputRef = ref || defaultRef;
    const [fontString, setFontString] = useState("14px sans-serif");
    const displayValue = useMemo(
      () => value || rest.placeholder || "",
      [value, rest.placeholder]
    );
    const textWidth = useTextWidth(displayValue, fontString);
    const dynamicWidth = useMemo(
      () => `${Math.max(textWidth + 16, 24)}px`,
      [textWidth]
    );
    useEffect(() => {
      if (!("current" in inputRef) || !inputRef.current) return;
      const element = inputRef.current;
      const updateFont = () => {
        const font = getFontString(element);
        setFontString(font);
      };
      updateFont();
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.type === "attributes" && (mutation.attributeName === "style" || mutation.attributeName === "class")) {
            updateFont();
          }
        });
      });
      observer.observe(element, {
        attributes: true,
        attributeFilter: ["style", "class"]
      });
      return () => {
        observer.disconnect();
      };
    }, [inputRef]);
    const handleChange = useCallback(
      (evt) => {
        const newValue = evt.target.value;
        onChange == null ? void 0 : onChange(evt);
        if (!isControlled) {
          setInternalValue(newValue);
        }
        onChangeValue == null ? void 0 : onChangeValue(newValue);
      },
      [onChange, onChangeValue, isControlled]
    );
    const onClick = useCallback(() => {
      var _a2;
      if ("current" in inputRef) {
        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
      }
    }, [inputRef]);
    return /* @__PURE__ */ jsx(
      Box,
      {
        className: "auto-sizing-input wrapper",
        maxWidth,
        minWidth,
        onClick,
        style: { width: dynamicWidth },
        children: /* @__PURE__ */ jsx("input", __spreadValues({ onChange: handleChange, ref: inputRef, value }, rest))
      }
    );
  }
);
AutoSizingInput.displayName = "AutoSizingInput";

export {
  AutoSizingInput
};
//# sourceMappingURL=chunk-6SYFG6YY.js.map