let graph:any = null;
export const keyboardEvents = (graph1:any) => {
  graph = graph1;
  console.log('keyboardEvents', document.getElementById('flow-create-content'));
  const flowElement = document.getElementById('flow-create-content') as HTMLElement;
  flowElement.tabIndex = -1;
  flowElement.focus();
  flowElement.addEventListener('keydown',
    keyDownFun
  );
  flowElement.addEventListener('keyup', keyUpFun);

  // graph.bindKey('ctrl+c', () => {
  //   const cells = graph.getSelectedCells();
  //   if (cells.length) {
  //     graph.copy(cells);
  //   }
  //   return false;
  // });

  // graph.bindKey('ctrl+v', () => {
  //   if (!graph.isClipboardEmpty()) {
  //     const cells = graph.paste({ offset: 20 });
  //     graph.cleanSelection();
  //     graph.select(cells);
  //   }
  //   return false;
  // });

  // graph.bindKey('ctrl+z', () => {
  //   graph.undo();
  //   return false;
  // });

  // graph.bindKey('space', () => {
  //   console.log('space');
  //   graph.enablePanning();
  //   graph.disableSelection();
  //   return false;
  // }, 'keydown');

  // graph.bindKey('space', () => {
  //   graph.disablePanning();
  //   graph.enableSelection();
  //   return false;
  // }, 'keyup');

  // graph.bindKey(['delete', 'backspace'], () => {
  //   const cells = graph.getSelectedCells();
  //   console.log('cells', cells);
  //   if (cells.length) {
  //     graph.removeCells(cells);
  //   }
  //   return false;
  // });
};

export const cancelKeyboardEvents = () => {
  graph = null;
  const flowElement = document.getElementById('flow-create-content') as HTMLElement;
  flowElement.removeEventListener('keydown', keyDownFun);
  flowElement.removeEventListener('keyup', keyUpFun);
};
const keyDownFun = (event: KeyboardEvent) => {
  console.log('keyDownFun', event);
  // 2. 阻止浏览器的默认保存行为
  // 判断是否按下了 Ctrl + c (Windows) 或 Cmd + c (Mac)
  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
    // ctrl+c
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.copy(cells);
    }
    event.preventDefault();
  }
  // 判断是否按下了 Ctrl + v (Windows) 或 Cmd + v (Mac)
  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v') {
    // ctrl+v
    if (!graph.isClipboardEmpty()) {
      const cells = graph.paste({ offset: 20 });
      graph.cleanSelection();
      graph.select(cells);
    }
    event.preventDefault();
  }
  // 判断是否按下了 Ctrl + z (Windows) 或 Cmd + z (Mac)
  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
    // ctrl+z
    graph.undo();
    event.preventDefault();
  }
  // 判断是否按下了空格键
  if ( event.key.toLowerCase() === ' ') {
    console.log('space keyDownFun');
    graph.enablePanning();
    graph.disableSelection();
    event.preventDefault();
  }
  if ( event.key.toLowerCase() === 'delete' || event.key.toLowerCase() === 'backspace') {
    const cells = graph.getSelectedCells();
    console.log('cells', cells);
    if (cells.length) {
      graph.removeCells(cells);
    }
    event.preventDefault();
  }
};
const keyUpFun = (event: KeyboardEvent) => {
  // 判断是否按下了空格键
  if ( event.key.toLowerCase() === ' ') {
    console.log('space keyUpFun');
    graph.disablePanning();
    graph.enableSelection();
  }
};
