/**
 * 生成選中圖形的快照，并保存到操作系統剪貼板中
 */
const getSelectedItemsSnapshot() => {
  const selectedItems = selectSet.getItems();
  if (selectedItems.length === 0) {
    return null;
  }

  // 提取圖形原始屬性，丟掉多余屬性（比如 id）
  const copiedData = arrMap(selectedItems, (item) =>
    lodash.omit(item.getAttrs(), 'id'),
  );

  // 序列化
  return JSON.stringify({
    appVersion: this.editor.appVersion,
    paperId: this.editor.paperId,
    data: JSON.stringify(copiedData),
  });
}

/**
 * 綁定 Ctrl/Cmd + C 的事件響應函數
 */
const copyHandler = () => {
  const snapshot = getSelectedItemsSnapshot();
  if (!snapshot) {
    return;
  }

  // 將序列化結果保存到剪貼板
  navigator.clipboard.writeText(snapshot).then(() => {
    // 這里可以考慮加一個 “復制成功” 彈窗提示
    console.log('copied');
  });
};

hotkeys('cmd+c, ctrl+c', copyHandler);

const pasteHandler = (e: Event) => {
  const event = e as ClipboardEvent;
  const clipboardData = event.clipboardData;
  if (!clipboardData) {
    return;
  }
  // 拿到粘貼的文本內容
  const pastedData = clipboardData.getData('Text');
  // ...
};

// 監聽 “粘貼” 事件
window.addEventListener('paste', pasteHandler);

class ClipboardManager {
  private unbindEvents = noop;
  constructor(private editor: Editor) {}

  bindEvents() {
    // Ctrl+C 鍵盤事件響應函數
    const copyHandler = () => {
      this.copy();
    };

    // 粘貼事件響應函數
    const pasteHandler = (e: Event) => {
      const event = e as ClipboardEvent;
      const clipboardData = event.clipboardData;
      if (!clipboardData) {
        return;
      }
      const pastedData = clipboardData.getData('Text');
      this.addGraphsFromClipboard(pastedData);
    };

    hotkeys('cmd+c, ctrl+c', copyHandler);
    window.addEventListener('paste', pasteHandler);

    this.unbindEvents = () => {
      hotkeys.unbind('cmd+c, ctrl+c', copyHandler);
      window.removeEventListener('paste', pasteHandler);
    };
  }

  /**
   * 將快照保存到剪貼板
   */
  copy() {
    const snapshot = this.getSelectedItemsSnapshot();
    if (!snapshot) {
      return;
    }

    navigator.clipboard.writeText(snapshot).then(() => {
      console.log('copied');
    });
  }

  pasteAt(x: number, y: number) {
    navigator.clipboard.readText().then((pastedData) => {
      this.addGraphsFromClipboard(pastedData, x, y);
    });
  }

  /**
   * 生成選中圖形的快照（序列化）
   */
  private getSelectedItemsSnapshot() {
    const selectedItems = this.editor.selectedElements.getItems();
    if (selectedItems.length === 0) {
      return null;
    }


    const copiedData = arrMap(selectedItems, (item) =>
      omit(item.getAttrs(), 'id'),
    );

    return JSON.stringify({
      appVersion: this.editor.appVersion,
      paperId: this.editor.paperId,
      data: JSON.stringify(copiedData),
    });
  }

  // 在指定坐標位置粘貼內容
  private addGraphsFromClipboard(dataStr: string): void;
  private addGraphsFromClipboard(dataStr: string, x: number, y: number): void;
  private addGraphsFromClipboard(dataStr: string, x?: number, y?: number) {
    let pastedData: IEditorPaperData | null = null;
    try {
      // 反序列化
      pastedData = JSON.parse(dataStr);
    } catch (e) {
      return;
    }

    // 數據格式校驗
    if (
      !(
        pastedData &&
        pastedData.appVersion.startsWith('suika-editor') &&
        pastedData.data
      )
    ) {
      return;
    }

    const editor = this.editor;
    // 將數據解析并添加到圖形樹中
    const pastedGraphs = editor.sceneGraph.addGraphsByStr(pastedData.data);
    if (pastedGraphs.length === 0) {
      return;
    }

    // 添加到歷史記錄（以實現撤銷重做）
    editor.commandManager.pushCommand(
      new AddShapeCommand('pasted graphs', editor, pastedGraphs),
    );
    // 標記粘貼圖形為選中狀態
    editor.selectedElements.setItems(pastedGraphs);

    const bbox = editor.selectedElements.getBBox()!;
    // 如果是右鍵粘貼（x 和 y 沒有值）且跨圖紙粘貼，計算粘貼圖形要移動的目標位置
    if (
      (x === undefined || y === undefined) &&
      pastedData.paperId !== editor.paperId
    ) {
      const vwCenter = this.editor.viewportManager.getCenter();
      x = vwCenter.x - bbox.width / 2;
      y = vwCenter.y - bbox.height / 2;
    }

    // 遍歷粘貼圖形，根據 x 和 y 進行位置修正
    if (x !== undefined && y !== undefined) {
      const dx = x - bbox.x;
      const dy = y - bbox.y;
      if (dx || dy) {
        Graph.dMove(pastedGraphs, dx, dy);
      }
    }

    // 渲染畫布
    editor.sceneGraph.render();
  }

  // 銷毀時解綁事件監聽
  destroy() {
    this.unbindEvents();
  }
}

const blob = new Blob(
  [
    `<meta charset="utf-8">
    <span data-suika-meta="${這里是元數據}"></span>
    <span data-suika-data="${這里是主體數據}"><span>`,
  ],
  { type: 'text/html' },
);

navigator.clipboard
  .write([new ClipboardItem({ [blob.type]: blob })])
  .then(() => {
    console.log('copied');
  });