// packages/block-editor/src/components/block-lock/toolbar.js
import { __ } from "@wordpress/i18n";
import { ToolbarButton, ToolbarGroup } from "@wordpress/components";
import { useReducer, useRef, useEffect } from "@wordpress/element";
import { lock, unlock } from "@wordpress/icons";
import BlockLockModal from "./modal";
import useBlockLock from "./use-block-lock";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function BlockLockToolbar({ clientId }) {
  const { canLock, isLocked } = useBlockLock(clientId);
  const [isModalOpen, toggleModal] = useReducer(
    (isActive) => !isActive,
    false
  );
  const hasLockButtonShownRef = useRef(false);
  useEffect(() => {
    if (isLocked) {
      hasLockButtonShownRef.current = true;
    }
  }, [isLocked]);
  if (!isLocked && !hasLockButtonShownRef.current) {
    return null;
  }
  let label = isLocked ? __("Unlock") : __("Lock");
  if (!canLock && isLocked) {
    label = __("Locked");
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(ToolbarGroup, { className: "block-editor-block-lock-toolbar", children: /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        disabled: !canLock,
        icon: isLocked ? lock : unlock,
        label,
        onClick: toggleModal,
        "aria-expanded": isModalOpen,
        "aria-haspopup": "dialog"
      }
    ) }),
    isModalOpen && /* @__PURE__ */ jsx(BlockLockModal, { clientId, onClose: toggleModal })
  ] });
}
export {
  BlockLockToolbar as default
};
//# sourceMappingURL=toolbar.js.map
