"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _character = require("diff/lib/diff/character");
var _i18n = require("@wordpress/i18n");
var _blocks = require("@wordpress/blocks");
var _blockView = _interopRequireDefault(require("./block-view"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

// diff doesn't tree-shake correctly, so we import from the individual
// module here, to avoid including too much of the library

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function BlockCompare({
  block,
  onKeep,
  onConvert,
  convertor,
  convertButtonText
}) {
  function getDifference(originalContent, newContent) {
    const difference = (0, _character.diffChars)(originalContent, newContent);
    return difference.map((item, pos) => {
      const classes = (0, _clsx.default)({
        'block-editor-block-compare__added': item.added,
        'block-editor-block-compare__removed': item.removed
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: classes,
        children: item.value
      }, pos);
    });
  }
  function getConvertedContent(convertedBlock) {
    // The convertor may return an array of items or a single item.
    const newBlocks = Array.isArray(convertedBlock) ? convertedBlock : [convertedBlock];

    // Get converted block details.
    const newContent = newBlocks.map(item => (0, _blocks.getSaveContent)(item.name, item.attributes, item.innerBlocks));
    return newContent.join('');
  }
  const converted = getConvertedContent(convertor(block));
  const difference = getDifference(block.originalContent, converted);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "block-editor-block-compare__wrapper",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockView.default, {
      title: (0, _i18n.__)('Current'),
      className: "block-editor-block-compare__current",
      action: onKeep,
      actionText: (0, _i18n.__)('Convert to HTML'),
      rawContent: block.originalContent,
      renderedContent: block.originalContent
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockView.default, {
      title: (0, _i18n.__)('After Conversion'),
      className: "block-editor-block-compare__converted",
      action: onConvert,
      actionText: convertButtonText,
      rawContent: difference,
      renderedContent: converted
    })]
  });
}
var _default = exports.default = BlockCompare;
//# sourceMappingURL=index.js.map