"use strict";

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

/**
 * Internal dependencies
 */

/**
 * Component that:
 *
 * - Displays a 'Edit your template to edit this block' notification when the
 *   user is focusing on editing page content and clicks on a disabled template
 *   block.
 * - Displays a 'Edit your template to edit this block' dialog when the user
 *   is focusing on editing page content and double clicks on a disabled
 *   template block.
 *
 * @param {Object}                                 props
 * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block
 *                                                                  editor iframe canvas.
 */function EditTemplateBlocksNotification({
  contentRef
}) {
  const {
    onNavigateToEntityRecord,
    templateId
  } = (0, _data.useSelect)(select => {
    const {
      getEditorSettings,
      getCurrentTemplateId
    } = select(_store.store);
    return {
      onNavigateToEntityRecord: getEditorSettings().onNavigateToEntityRecord,
      templateId: getCurrentTemplateId()
    };
  }, []);
  const canEditTemplate = (0, _data.useSelect)(select => !!select(_coreData.store).canUser('create', {
    kind: 'postType',
    name: 'wp_template'
  }), []);
  const [isDialogOpen, setIsDialogOpen] = (0, _element.useState)(false);
  (0, _element.useEffect)(() => {
    const handleDblClick = event => {
      if (!canEditTemplate) {
        return;
      }
      if (!event.target.classList.contains('is-root-container') || event.target.dataset?.type === 'core/template-part') {
        return;
      }
      if (!event.defaultPrevented) {
        event.preventDefault();
        setIsDialogOpen(true);
      }
    };
    const canvas = contentRef.current;
    canvas?.addEventListener('dblclick', handleDblClick);
    return () => {
      canvas?.removeEventListener('dblclick', handleDblClick);
    };
  }, [contentRef, canEditTemplate]);
  if (!canEditTemplate) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
    isOpen: isDialogOpen,
    confirmButtonText: (0, _i18n.__)('Edit template'),
    onConfirm: () => {
      setIsDialogOpen(false);
      onNavigateToEntityRecord({
        postId: templateId,
        postType: 'wp_template'
      });
    },
    onCancel: () => setIsDialogOpen(false),
    size: "medium",
    children: (0, _i18n.__)('You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?')
  });
}
//# sourceMappingURL=edit-template-blocks-notification.js.map