import { jsxDEV } from "react/jsx-dev-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__ */ jsxDEV("div", { className: listClassName(["concealableField", toViewClass("extended", isExtended), toStateClass("editing", isEditing)]), children: [
      /* @__PURE__ */ jsxDEV("div", { className: "concealableField-field", children: children({
        onBlur,
        onFocus,
        inputRef
      }) }, void 0, false, {
        fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/ui/ConcealableField.tsx",
        lineNumber: 39,
        columnNumber: 5
      }, void 0),
      /* @__PURE__ */ jsxDEV(
        "div",
        {
          className: "concealableField-cover",
          onClick: () => {
            setIsEditing(true);
          },
          onTransitionEnd: (e) => {
            if (isEditing && inputRef.current && e.currentTarget === e.target) {
              inputRef.current.focus();
            }
          },
          children: [
            /* @__PURE__ */ jsxDEV("div", { className: "concealableField-value", children: renderConcealedValue() }, void 0, false, {
              fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/ui/ConcealableField.tsx",
              lineNumber: 58,
              columnNumber: 6
            }, void 0),
            /* @__PURE__ */ jsxDEV(
              Button,
              {
                size: "small",
                distinction: "seamless",
                children: "Edit",
                ...buttonProps,
                className: "concealableField-button"
              },
              void 0,
              false,
              {
                fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/ui/ConcealableField.tsx",
                lineNumber: 59,
                columnNumber: 6
              },
              void 0
            )
          ]
        },
        "concealableField-cover",
        true,
        {
          fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/ui/ConcealableField.tsx",
          lineNumber: 46,
          columnNumber: 5
        },
        void 0
      )
    ] }, void 0, true, {
      fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/ui/ConcealableField.tsx",
      lineNumber: 38,
      columnNumber: 4
    }, void 0);
  }
);
ConcealableField.displayName = "ConcealableField";
export {
  ConcealableField
};
//# sourceMappingURL=ConcealableField.js.map
