"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _url = require("@wordpress/url");
var _element = require("@wordpress/element");
var _hooks = require("@wordpress/hooks");
var _compose = require("@wordpress/compose");
var _coreData = require("@wordpress/core-data");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function PostLockedModal() {
  const instanceId = (0, _compose.useInstanceId)(PostLockedModal);
  const hookName = 'core/editor/post-locked-modal-' + instanceId;
  const {
    autosave,
    updatePostLock
  } = (0, _data.useDispatch)(_store.store);
  const {
    isLocked,
    isTakeover,
    user,
    postId,
    postLockUtils,
    activePostLock,
    postType,
    previewLink
  } = (0, _data.useSelect)(select => {
    const {
      isPostLocked,
      isPostLockTakeover,
      getPostLockUser,
      getCurrentPostId,
      getActivePostLock,
      getEditedPostAttribute,
      getEditedPostPreviewLink,
      getEditorSettings
    } = select(_store.store);
    const {
      getPostType
    } = select(_coreData.store);
    return {
      isLocked: isPostLocked(),
      isTakeover: isPostLockTakeover(),
      user: getPostLockUser(),
      postId: getCurrentPostId(),
      postLockUtils: getEditorSettings().postLockUtils,
      activePostLock: getActivePostLock(),
      postType: getPostType(getEditedPostAttribute('type')),
      previewLink: getEditedPostPreviewLink()
    };
  }, []);
  (0, _element.useEffect)(() => {
    /**
     * Keep the lock refreshed.
     *
     * When the user does not send a heartbeat in a heartbeat-tick
     * the user is no longer editing and another user can start editing.
     *
     * @param {Object} data Data to send in the heartbeat request.
     */
    function sendPostLock(data) {
      if (isLocked) {
        return;
      }
      data['wp-refresh-post-lock'] = {
        lock: activePostLock,
        post_id: postId
      };
    }

    /**
     * Refresh post locks: update the lock string or show the dialog if somebody has taken over editing.
     *
     * @param {Object} data Data received in the heartbeat request
     */
    function receivePostLock(data) {
      if (!data['wp-refresh-post-lock']) {
        return;
      }
      const received = data['wp-refresh-post-lock'];
      if (received.lock_error) {
        // Auto save and display the takeover modal.
        autosave();
        updatePostLock({
          isLocked: true,
          isTakeover: true,
          user: {
            name: received.lock_error.name,
            avatar: received.lock_error.avatar_src_2x
          }
        });
      } else if (received.new_lock) {
        updatePostLock({
          isLocked: false,
          activePostLock: received.new_lock
        });
      }
    }

    /**
     * Unlock the post before the window is exited.
     */
    function releasePostLock() {
      if (isLocked || !activePostLock) {
        return;
      }
      const data = new window.FormData();
      data.append('action', 'wp-remove-post-lock');
      data.append('_wpnonce', postLockUtils.unlockNonce);
      data.append('post_ID', postId);
      data.append('active_post_lock', activePostLock);
      if (window.navigator.sendBeacon) {
        window.navigator.sendBeacon(postLockUtils.ajaxUrl, data);
      } else {
        const xhr = new window.XMLHttpRequest();
        xhr.open('POST', postLockUtils.ajaxUrl, false);
        xhr.send(data);
      }
    }

    // Details on these events on the Heartbeat API docs
    // https://developer.wordpress.org/plugins/javascript/heartbeat-api/
    (0, _hooks.addAction)('heartbeat.send', hookName, sendPostLock);
    (0, _hooks.addAction)('heartbeat.tick', hookName, receivePostLock);
    window.addEventListener('beforeunload', releasePostLock);
    return () => {
      (0, _hooks.removeAction)('heartbeat.send', hookName);
      (0, _hooks.removeAction)('heartbeat.tick', hookName);
      window.removeEventListener('beforeunload', releasePostLock);
    };
  }, []);
  if (!isLocked) {
    return null;
  }
  const userDisplayName = user.name;
  const userAvatar = user.avatar;
  const unlockUrl = (0, _url.addQueryArgs)('post.php', {
    'get-post-lock': '1',
    lockKey: true,
    post: postId,
    action: 'edit',
    _wpnonce: postLockUtils.nonce
  });
  const allPostsUrl = (0, _url.addQueryArgs)('edit.php', {
    post_type: postType?.slug
  });
  const allPostsLabel = (0, _i18n.__)('Exit editor');
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
    title: isTakeover ? (0, _i18n.__)('Someone else has taken over this post') : (0, _i18n.__)('This post is already being edited'),
    focusOnMount: true,
    shouldCloseOnClickOutside: false,
    shouldCloseOnEsc: false,
    isDismissible: false
    // Do not remove this class, as this class is used by third party plugins.
    ,
    className: "editor-post-locked-modal",
    size: "medium",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      alignment: "top",
      spacing: 6,
      children: [!!userAvatar && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
        src: userAvatar,
        alt: (0, _i18n.__)('Avatar'),
        className: "editor-post-locked-modal__avatar",
        width: 64,
        height: 64
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        children: [!!isTakeover && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          children: (0, _element.createInterpolateElement)(userDisplayName ? (0, _i18n.sprintf)(/* translators: %s: user's display name */
          (0, _i18n.__)('<strong>%s</strong> now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'), userDisplayName) : (0, _i18n.__)('Another user now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'), {
            strong: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {}),
            PreviewLink: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
              href: previewLink,
              children: (0, _i18n.__)('preview')
            })
          })
        }), !isTakeover && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
            children: (0, _element.createInterpolateElement)(userDisplayName ? (0, _i18n.sprintf)(/* translators: %s: user's display name */
            (0, _i18n.__)('<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'), userDisplayName) : (0, _i18n.__)('Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'), {
              strong: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {}),
              PreviewLink: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
                href: previewLink,
                children: (0, _i18n.__)('preview')
              })
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
            children: (0, _i18n.__)('If you take over, the other user will lose editing control to the post, but their changes will be saved.')
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
          className: "editor-post-locked-modal__buttons",
          justify: "flex-end",
          children: [!isTakeover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "tertiary",
            href: unlockUrl,
            children: (0, _i18n.__)('Take over')
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "primary",
            href: allPostsUrl,
            children: allPostsLabel
          })]
        })]
      })]
    })
  });
}

/**
 * A modal component that is displayed when a post is locked for editing by another user.
 * The modal provides information about the lock status and options to take over or exit the editor.
 *
 * @return {React.ReactNode} The rendered PostLockedModal component.
 */
var _default = exports.default = globalThis.IS_GUTENBERG_PLUGIN ? (0, _components.withFilters)('editor.PostLockedModal')(PostLockedModal) : PostLockedModal;
//# sourceMappingURL=index.js.map