import { fabric } from 'fabric';

fabric.Canvas.prototype.initialize = (function (originalFn) {
  return function (...args) {
    originalFn.call(this, ...args);
    this._historyInit();
    return this;
  };
})(fabric.Canvas.prototype.initialize);

/**
 * Override the dispose function for the _historyDispose();
 */
fabric.Canvas.prototype.dispose = (function (originalFn) {
  return function (...args) {
    originalFn.call(this, ...args);
    this._historyDispose();
    return this;
  };
})(fabric.Canvas.prototype.dispose);

/**
 * Returns current state of the string of the canvas
 */
fabric.Canvas.prototype._historyNext = function () {
  return JSON.stringify(this.toDatalessJSON(this.extraProps));
};

/**
 * Returns an object with fabricjs event mappings
 */
fabric.Canvas.prototype._historyEvents = function () {
  return {
    'object:added': (e) => this._historySaveAction(e),
    'object:removed': (e) => this._historySaveAction(e),
    'object:modified': (e) => this._historySaveAction(e),
    'object:skewing': (e) => this._historySaveAction(e),
  };
};

/**
 * Initialization of the plugin
 */
fabric.Canvas.prototype._historyInit = function () {
  this.historyStack = [];
  this.historyIndex = 0;
  this.historyMaxLength = 100;
  this.extraProps = [
    'id',
    'gradientAngle',
    'selectable',
    'hasControls',
    'linkData',
    'editable',
    'extensionType',
    'extension',
  ];
  this.historyNextState = this._historyNext();
  // 需要两次操作的标记，为true时表示当前操作记录为最新记录，需要撤销两步，因为最顶层的是当前的最新记录，undo一次后后置为false
  this.isLatestHistoryState = true;
  // 正在读取历史记录的标记，为 true 时不允许 undo/redo
  this.isLoadingHistory = false;

  this.on(this._historyEvents());
};

/**
 * Remove the custom event listeners
 */
fabric.Canvas.prototype._historyDispose = function () {
  this.off(this._historyEvents());
};

/**
 * It pushes the state of the canvas into history stack
 */
fabric.Canvas.prototype._historySaveAction = function (e) {
  if (this.historyProcessing) return;
  if (!e || (e.target && !e.target.excludeFromExport)) {
    const json = this._historyNext();
    // 当前操作记录非最新记录，更新记录前需要校正历史索引，不然会丢失一个记录（undo时撤销了两次记录）。理论上不会超出历史记录上限，不过还是加了限制
    !this.isLatestHistoryState &&
      (this.isLatestHistoryState = true) &&
      this.historyIndex < this.historyMaxLength &&
      this.historyIndex++;
    // 每次的最新操作都要清空历史索引之后的记录，防止redo旧记录，不然可能会redo之前某个阶段的操作记录
    this.historyStack.length > this.historyIndex && this.historyStack.splice(this.historyIndex);
    // 最多保存 historyMaxLength 条记录
    if (this.historyIndex >= this.historyMaxLength) this.historyStack.shift();
    this.historyIndex < this.historyMaxLength && this.historyIndex++;
    this.historyStack.push(json);
    this.historyNextState = this._historyNext();
    this.fire('history:append', { json });
  }
};

/**
 * Undo to latest history.
 * Pop the latest state of the history. Re-render.
 * Also, pushes into redo history.
 */
fabric.Canvas.prototype.undo = function (callback) {
  if (this.isLoadingHistory) return;
  if (this.historyIndex <= 0) return;
  // The undo process will render the new states of the objects
  // Therefore, object:added and object:modified events will triggered again
  // To ignore those events, we are setting a flag.
  this.historyProcessing = true;

  // 当前操作记录为最新记录，需要撤销两步，因为最顶层的是当前的最新记录
  this.isLatestHistoryState && this.historyIndex-- && (this.isLatestHistoryState = false);
  const history = this.historyStack[--this.historyIndex];
  if (history) {
    // Push the current state to the redo history
    this.historyNextState = history;
    this._loadHistory(history, 'history:undo', callback);
  } else {
    console.log(1111);
    this.historyIndex < 0 && (this.historyIndex = 0);
    this.historyProcessing = false;
  }
};

/**
 * Redo to latest undo history.
 */
fabric.Canvas.prototype.redo = function (callback) {
  if (this.isLoadingHistory) return;
  if (this.historyIndex >= this.historyStack.length) return;
  // The undo process will render the new states of the objects
  // Therefore, object:added and object:modified events will triggered again
  // To ignore those events, we are setting a flag.
  this.historyProcessing = true;
  // 当前操作记录不是最新记录（被撤销过），需要恢复两步，抵消最初撤销时撤销两步的操作
  !this.isLatestHistoryState && ++this.historyIndex && (this.isLatestHistoryState = true);
  const history = this.historyStack[this.historyIndex];
  if (history) {
    // Every redo action is actually a new action to the undo history
    this.historyNextState = history;
    this._loadHistory(history, 'history:redo', callback);
    this.historyIndex++;
  } else {
    this.historyProcessing = false;
  }
};

// loadFromJSON 是异步操作，所以通过 isLoadingHistory = true 表示历史读取中，不可 undo/redo，
// 不然当页面复杂且快速 undo/redo 多次后，可能会在之前的历史上 redo/undo
fabric.Canvas.prototype._loadHistory = function (history, event, callback) {
  this.isLoadingHistory = true;
  const that = this;

  // 需要把历史记录中的 workspace 的 evented 属性设置为 false，否则会导致历史记录恢复后，鼠标悬浮 workspace 出现可操作的样式
  const workspaceHistory = history.objects?.find((item) => item.id === 'workspace');
  workspaceHistory && (workspaceHistory.evented = false);

  this.loadFromJSON(history, function () {
    that.renderAll();
    that.fire(event);
    that.historyProcessing = false;
    that.isLoadingHistory = false;

    if (callback && typeof callback === 'function') callback();
  });
};

/**
 * Clear undo and redo history stacks
 */
fabric.Canvas.prototype.clearHistory = function (type) {
  const one = this.historyStack.pop();
  if (!type || !one) {
    this.historyStack = [];
    this.historyIndex = 0;
    this.fire('history:clear');
  } else {
    this.historyStack = [one];
    this.historyIndex = 1;
    this.fire('history:clear');
  }
  this.isLatestHistoryState = true;
};

fabric.Canvas.prototype.clearUndo = function () {
  this.historyStack.splice(this.historyIndex);
};

// 如果在做一些操作之后，需要撤销上一步的操作并刷新历史记录（想在监听modified事件后做些额外的操作并记录操作后的历史），可以调用这个方法
fabric.Canvas.prototype.refreshHistory = function () {
  this.historyProcessing = false;
  this.historyStack.splice(--this.historyIndex);
  this._historySaveAction();
};

/**
 * On the history
 */
fabric.Canvas.prototype.onHistory = function () {
  this.historyProcessing = false;

  this._historySaveAction();
};

/**
 * Check if there are actions that can be undone
 */

fabric.Canvas.prototype.canUndo = function () {
  return this.historyIndex > 0;
};

/**
 * Check if there are actions that can be redone
 */
fabric.Canvas.prototype.canRedo = function () {
  return this.historyStack.length > this.historyIndex;
};

/**
 * Off the history
 */
fabric.Canvas.prototype.offHistory = function () {
  this.historyProcessing = true;
};