import { jsxs, jsx } from "react/jsx-runtime";
import { toViewClass, toStateClass, Button } from "@contember/ui";
import { listClassName } from "@contember/utilities";
import { memo, useState, useRef, useCallback } from "react";
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__ */ jsxs("div", { className: listClassName(["concealableField", toViewClass("extended", isExtended), toStateClass("editing", isEditing)]), children: [
      /* @__PURE__ */ jsx("div", { className: "concealableField-field", children: children({
        onBlur,
        onFocus,
        inputRef
      }) }),
      /* @__PURE__ */ jsxs(
        "div",
        {
          className: "concealableField-cover",
          onClick: () => {
            setIsEditing(true);
          },
          onTransitionEnd: (e) => {
            if (isEditing && inputRef.current && e.currentTarget === e.target) {
              inputRef.current.focus();
            }
          },
          children: [
            /* @__PURE__ */ jsx("div", { className: "concealableField-value", children: renderConcealedValue() }),
            /* @__PURE__ */ jsx(
              Button,
              {
                size: "small",
                distinction: "seamless",
                children: "Edit",
                ...buttonProps,
                className: "concealableField-button"
              }
            )
          ]
        },
        "concealableField-cover"
      )
    ] });
  }
);
ConcealableField.displayName = "ConcealableField";
export {
  ConcealableField
};
//# sourceMappingURL=ConcealableField.js.map
