import { memo, useState, useRef, useCallback, createElement } from "react";
import { toViewClass, toStateClass, Button } from "@contember/ui";
import cn from "classnames";
const ConcealableField = memo(({ buttonProps, concealTimeout = 2e3, renderConcealedValue, isExtended, children }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [concealTimeoutId, setConcealTimeoutId] = useState(void 0);
  const inputRef = useRef();
  const onFocus = useCallback(() => {
    if (concealTimeoutId !== void 0) {
      clearTimeout(concealTimeoutId);
    }
  }, [concealTimeoutId]);
  const onBlur = useCallback(() => {
    setConcealTimeoutId(setTimeout(() => setIsEditing(false), concealTimeout));
  }, [concealTimeout]);
  return /* @__PURE__ */ createElement("div", {
    className: cn("concealableField", toViewClass("extended", isExtended), toStateClass("editing", isEditing))
  }, /* @__PURE__ */ createElement("div", {
    className: cn("concealableField-field")
  }, children({
    onBlur,
    onFocus,
    inputRef
  })), /* @__PURE__ */ createElement("div", {
    className: "concealableField-cover",
    onClick: () => {
      setIsEditing(true);
    },
    key: "concealableField-cover",
    onTransitionEnd: (e) => {
      if (isEditing && inputRef.current && e.currentTarget === e.target) {
        inputRef.current.focus();
      }
    }
  }, /* @__PURE__ */ createElement("div", {
    className: "concealableField-value"
  }, renderConcealedValue()), /* @__PURE__ */ createElement(Button, {
    size: "small",
    distinction: "seamless",
    children: "Edit",
    ...buttonProps,
    className: "concealableField-button"
  })));
});
ConcealableField.displayName = "ConcealableField";
export { ConcealableField };
//# sourceMappingURL=ConcealableField.js.map
