"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockLockModal;
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _blocks = require("@wordpress/blocks");
var _useBlockLock = _interopRequireDefault(require("./use-block-lock"));
var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Entity based blocks which allow edit locking
const ALLOWS_EDIT_LOCKING = ['core/navigation'];
function getTemplateLockValue(lock) {
  // Prevents all operations.
  if (lock.remove && lock.move) {
    return 'all';
  }

  // Prevents inserting or removing blocks, but allows moving existing blocks.
  if (lock.remove && !lock.move) {
    return 'insert';
  }
  return false;
}
function BlockLockModal({
  clientId,
  onClose
}) {
  const [lock, setLock] = (0, _element.useState)({
    move: false,
    remove: false
  });
  const {
    canEdit,
    canMove,
    canRemove
  } = (0, _useBlockLock.default)(clientId);
  const {
    allowsEditLocking,
    templateLock,
    hasTemplateLock
  } = (0, _data.useSelect)(select => {
    const {
      getBlockName,
      getBlockAttributes
    } = select(_store.store);
    const blockName = getBlockName(clientId);
    const blockType = (0, _blocks.getBlockType)(blockName);
    return {
      allowsEditLocking: ALLOWS_EDIT_LOCKING.includes(blockName),
      templateLock: getBlockAttributes(clientId)?.templateLock,
      hasTemplateLock: !!blockType?.attributes?.templateLock
    };
  }, [clientId]);
  const [applyTemplateLock, setApplyTemplateLock] = (0, _element.useState)(!!templateLock);
  const {
    updateBlockAttributes
  } = (0, _data.useDispatch)(_store.store);
  const blockInformation = (0, _useBlockDisplayInformation.default)(clientId);
  (0, _element.useEffect)(() => {
    setLock({
      move: !canMove,
      remove: !canRemove,
      ...(allowsEditLocking ? {
        edit: !canEdit
      } : {})
    });
  }, [canEdit, canMove, canRemove, allowsEditLocking]);
  const isAllChecked = Object.values(lock).every(Boolean);
  const isMixed = Object.values(lock).some(Boolean) && !isAllChecked;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
    title: (0, _i18n.sprintf)(/* translators: %s: Name of the block. */
    (0, _i18n.__)('Lock %s'), blockInformation.title),
    overlayClassName: "block-editor-block-lock-modal",
    onRequestClose: onClose,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
      onSubmit: event => {
        event.preventDefault();
        updateBlockAttributes([clientId], {
          lock,
          templateLock: applyTemplateLock ? getTemplateLockValue(lock) : undefined
        });
        onClose();
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
        className: "block-editor-block-lock-modal__options",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
          children: (0, _i18n.__)('Choose specific attributes to restrict or lock all available options.')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
          role: "list",
          className: "block-editor-block-lock-modal__checklist",
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
              __nextHasNoMarginBottom: true,
              className: "block-editor-block-lock-modal__options-all",
              label: (0, _i18n.__)('Lock all'),
              checked: isAllChecked,
              indeterminate: isMixed,
              onChange: newValue => setLock({
                move: newValue,
                remove: newValue,
                ...(allowsEditLocking ? {
                  edit: newValue
                } : {})
              })
            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
              role: "list",
              className: "block-editor-block-lock-modal__checklist",
              children: [allowsEditLocking && /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
                className: "block-editor-block-lock-modal__checklist-item",
                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
                  __nextHasNoMarginBottom: true,
                  label: (0, _i18n.__)('Restrict editing'),
                  checked: !!lock.edit,
                  onChange: edit => setLock(prevLock => ({
                    ...prevLock,
                    edit
                  }))
                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
                  className: "block-editor-block-lock-modal__lock-icon",
                  icon: lock.edit ? _icons.lock : _icons.unlock
                })]
              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
                className: "block-editor-block-lock-modal__checklist-item",
                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
                  __nextHasNoMarginBottom: true,
                  label: (0, _i18n.__)('Disable movement'),
                  checked: lock.move,
                  onChange: move => setLock(prevLock => ({
                    ...prevLock,
                    move
                  }))
                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
                  className: "block-editor-block-lock-modal__lock-icon",
                  icon: lock.move ? _icons.lock : _icons.unlock
                })]
              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
                className: "block-editor-block-lock-modal__checklist-item",
                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
                  __nextHasNoMarginBottom: true,
                  label: (0, _i18n.__)('Prevent removal'),
                  checked: lock.remove,
                  onChange: remove => setLock(prevLock => ({
                    ...prevLock,
                    remove
                  }))
                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
                  className: "block-editor-block-lock-modal__lock-icon",
                  icon: lock.remove ? _icons.lock : _icons.unlock
                })]
              })]
            })]
          })
        }), hasTemplateLock && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
          __nextHasNoMarginBottom: true,
          className: "block-editor-block-lock-modal__template-lock",
          label: (0, _i18n.__)('Apply to all blocks inside'),
          checked: applyTemplateLock,
          disabled: lock.move && !lock.remove,
          onChange: () => setApplyTemplateLock(!applyTemplateLock)
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
        className: "block-editor-block-lock-modal__actions",
        justify: "flex-end",
        expanded: false,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            variant: "tertiary",
            onClick: onClose,
            __next40pxDefaultSize: true,
            children: (0, _i18n.__)('Cancel')
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            variant: "primary",
            type: "submit",
            __next40pxDefaultSize: true,
            children: (0, _i18n.__)('Apply')
          })
        })]
      })]
    })
  });
}
//# sourceMappingURL=modal.js.map