import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
import EditorAlignImageRight from '@atlaskit/icon/glyph/editor/align-image-right';
import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
import { insideTable } from '../../core-utils';
import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } from '../../utils';

// Workaround as we don't want to import this package into `editor-common`
// We'll get type errors if this gets out of sync with `editor-plugin-width`.

export var alignmentIcons = [{
  id: 'editor.media.alignLeft',
  value: 'align-start',
  icon: EditorAlignImageLeft
}, {
  id: 'editor.media.alignCenter',
  value: 'center',
  icon: EditorAlignImageCenter
}, {
  id: 'editor.media.alignRight',
  value: 'align-end',
  icon: EditorAlignImageRight
}];
export var wrappingIcons = [{
  id: 'editor.media.wrapLeft',
  value: 'wrap-left',
  icon: WrapLeftIcon
}, {
  id: 'editor.media.wrapRight',
  value: 'wrap-right',
  icon: WrapRightIcon
}];
var breakoutIcons = [{
  value: 'wide',
  icon: WideIcon
}, {
  value: 'full-width',
  icon: FullWidthIcon
}];
export var layoutToMessages = {
  'wrap-left': toolbarMessages.wrapLeft,
  center: commonMessages.alignImageCenter,
  'wrap-right': toolbarMessages.wrapRight,
  wide: commonMessages.layoutWide,
  'full-width': commonMessages.layoutFullWidth,
  'align-end': commonMessages.alignImageRight,
  'align-start': commonMessages.alignImageLeft
};
var getNodeWidth = function getNodeWidth(node, schema) {
  var embedCard = schema.nodes.embedCard;
  if (node.type === embedCard) {
    return node.attrs.originalWidth || DEFAULT_EMBED_CARD_WIDTH;
  }
  return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
};
var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, analyticsApi) {
  return function (state, dispatch) {
    var _ref = state.selection,
      node = _ref.node;
    var previousLayoutType = node.attrs.layout;
    var mediaSingle = state.schema.nodes.mediaSingle;
    if (!dispatch) {
      return false;
    }
    var widthPluginState = widthPluginDependencyApi === null || widthPluginDependencyApi === void 0 ? void 0 : widthPluginDependencyApi.sharedState.currentState();
    if (!node || node.type !== nodeType || !widthPluginState) {
      return false;
    }
    var nodeWidth = getNodeWidth(node, state.schema);
    var newAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
    _objectSpread(_objectSpread({}, node.attrs), {}, {
      layout: layout
    }) : alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
    var tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
    tr.setMeta('scrollIntoView', false);
    // when image captions are enabled, the wrong node gets selected after
    // setNodeMarkup is called
    tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
    var paragraph = tr.doc.type.schema.nodes.paragraph;

    // see https://product-fabric.atlassian.net/browse/ED-15518 insert a new paragraph when an embedded card is wrapped left or right
    if (layout.startsWith('wrap') && paragraph && !tr.doc.nodeAt(state.selection.to) && (insideTable(state) || isInLayoutColumn(state))) {
      var emptyParaghraph = paragraph.createAndFill();
      if (emptyParaghraph) {
        tr.insert(state.selection.to, emptyParaghraph);
      }
    }
    analyticsApi === null || analyticsApi === void 0 || analyticsApi.attachAnalyticsEvent({
      eventType: EVENT_TYPE.TRACK,
      action: ACTION.SELECTED,
      actionSubject: ACTION_SUBJECT[node.type === mediaSingle ? 'MEDIA_SINGLE' : 'EMBEDS'],
      actionSubjectId: ACTION_SUBJECT_ID.RICH_MEDIA_LAYOUT,
      attributes: {
        previousLayoutType: previousLayoutType,
        currentLayoutType: layout
      }
    })(tr);
    dispatch(tr);
    return true;
  };
};
var getToolbarLayout = function getToolbarLayout(layout) {
  if (getBooleanFF('platform.editor.media.extended-resize-experience') && nonWrappedLayouts.includes(layout)) {
    return 'center';
  }
  return layout;
};
var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) {
  return icons.map(function (toolbarItem) {
    var id = toolbarItem.id,
      value = toolbarItem.value;
    return _objectSpread({
      id: id,
      type: 'button',
      icon: toolbarItem.icon,
      title: intl.formatMessage(layoutToMessages[value]),
      selected: getToolbarLayout(layout) === value,
      onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
    }, isChangingLayoutDisabled && {
      disabled: value !== 'center'
    });
  });
};
var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
  var nodes = _ref2.nodes;
  return hasParentNodeOfType([nodes.bodiedExtension, nodes.extensionFrame, nodes.listItem, nodes.expand, nodes.nestedExpand].concat(_toConsumableArray(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
};
var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
  var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
  var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
  var isChangingLayoutDisabled = arguments.length > 9 ? arguments[9] : undefined;
  var selection = state.selection;
  if (!(selection instanceof NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
    return [];
  }
  var layout = selection.node.attrs.layout;
  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
  var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
  var items = [].concat(_toConsumableArray(alignmentToolbarItems), _toConsumableArray(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), _toConsumableArray(wrappingToolbarItems), _toConsumableArray(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), _toConsumableArray(breakOutToolbarItems));
  return items;
};
var getSeparatorBetweenAlignmentAndWrapping = function getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping) {
  return allowAlignment && allowWrapping ? [{
    type: 'separator'
  }] : [];
};
var getSeparatorBeforeBreakoutItems = function getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing) {
  return !allowResizing && (allowAlignment || allowWrapping) ? [{
    type: 'separator'
  }] : [];
};
export default buildLayoutButtons;