import { memo, useEffect } from 'react';
import { connect } from 'react-redux';
import Mousetrap from 'mousetrap';
import { useHistory } from 'react-router-dom';
import { clearClipboard } from 'utils/utils';
import { addComponentByDrop } from 'models/component';
import { nodeManagementPositioning } from 'models/node';
import { useAuth } from 'components/easyUse';
import { modules } from 'constants/authority';

function RegisterHotKey({
  type,
  sortLayersDirection,
  groupByLayers,
  cancelGroupLayers,
  changeLayerStatus,
  copyComponents,
  nodeManagementPositioning,
  copyComponentsToClipboard,
  copyStyleToClipboard,
  pasteComponents,
  pasteStyle,
  transformLayersToPanel,
  addComponentByDrop,
  openModal
}) {
  const history = useHistory();
  const { checkAuth } = useAuth();
  const componentCopyable = checkAuth(modules.componentAdd);

  useEffect(() => {
    // 置顶
    Mousetrap.bind(['command+shift+up', 'ctrl+shift+up', 'command+alt+ctrl+up'], (e) => {
      e.preventDefault && e.preventDefault();
      sortLayersDirection('top');
    });
    // 置底
    Mousetrap.bind(['command+shift+down', 'ctrl+shift+down', 'command+alt+ctrl+down'], (e) => {
      e.preventDefault && e.preventDefault();
      sortLayersDirection('bottom');
    });
    // 上移
    Mousetrap.bind(['command+alt+up', 'ctrl+alt+up', 'command+]', 'ctrl+]'], (e) => {
      e.preventDefault && e.preventDefault();
      sortLayersDirection('up');
    });
    // 下移
    Mousetrap.bind(['command+alt+down', 'ctrl+alt+down', 'command+[', 'ctrl+['], (e) => {
      e.preventDefault && e.preventDefault();
      sortLayersDirection('down');
    });
    // 成组
    Mousetrap.bind(['command+g', 'ctrl+g'], (e) => {
      e.preventDefault && e.preventDefault();
      groupByLayers();
    });
    // 取消成组
    Mousetrap.bind(['command+shift+g', 'ctrl+shift+g'], (e) => {
      e.preventDefault && e.preventDefault();
      cancelGroupLayers();
    });
    // 锁定
    Mousetrap.bind(['command+shift+l', 'ctrl+shift+l'], (e) => {
      e.preventDefault && e.preventDefault();
      changeLayerStatus('lock');
    });
    // 隐藏
    Mousetrap.bind(['command+shift+h', 'ctrl+shift+h'], (e) => {
      e.preventDefault && e.preventDefault();
      changeLayerStatus('show');
    });

    // 拷贝样式
    Mousetrap.bind(['command+alt+c', 'ctrl+alt+c'], (e) => {
      e.preventDefault && e.preventDefault();
      copyStyleToClipboard();
    });

    // 粘贴样式
    Mousetrap.bind(['command+alt+v', 'ctrl+alt+v'], (e) => {
      e.preventDefault && e.preventDefault();
      openModal();
    });

    // 转换为动态面板
    Mousetrap.bind(['command+shift+d+3', 'ctrl+shift+d+3'], () => {
      transformLayersToPanel();
    });

    // 进入节点
    Mousetrap.bind(['command+shift+d+4', 'ctrl+shift+d+4'], async (e) => {
      e.preventDefault && e.preventDefault();
      const screenId = await nodeManagementPositioning?.();
      if (screenId) {
        history.push(`/node/view/${screenId}`);
      }
    });

    return () => {
      Mousetrap.unbind(['command+shift+up', 'ctrl+shift+up', 'command+alt+ctrl+up']);
      Mousetrap.unbind(['command+shift+down', 'ctrl+shift+down', 'command+alt+ctrl+down']);
      Mousetrap.unbind(['command+alt+up', 'ctrl+alt+up', 'command+]', 'ctrl+]']);
      Mousetrap.unbind(['command+alt+down', 'ctrl+alt+down', 'command+[', 'ctrl+[']);
      Mousetrap.unbind(['command+g', 'ctrl+g']);
      Mousetrap.unbind(['command+shift+g', 'ctrl+shift+g']);
      Mousetrap.unbind(['command+shift+l', 'ctrl+shift+l']);
      Mousetrap.unbind(['command+shift+h', 'ctrl+shift+h']);
      Mousetrap.unbind(['command+alt+c', 'ctrl+alt+c']);
      Mousetrap.unbind(['command+alt+v', 'ctrl+alt+v']);
      Mousetrap.unbind(['command+shift+d+3', 'ctrl+shift+d+3']);
      Mousetrap.unbind(['command+shift+d+4', 'ctrl+shift+d+4']);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [componentCopyable, pasteStyle, openModal]);

  useEffect(() => {
    // 黏贴图片上传
    const onPaste = (e) => {
      // 如果是input表单输入框，则表示是粘贴文本
      if (!/input|textarea/i.test(e.target.tagName) && !e.target.className.includes('scrolling-effect')) {
        const data = e.clipboardData || window.clipboardData;
        const items = data.items;
        const fileList: File[] = []; //存储文件数据
        if (items && items.length) {
          // 检索剪切板items
          for (let i = 0; i < items.length; i++) {
            const item = items[i];
            if (item.kind === 'file') {
              const file: File = item.getAsFile();
              if (file) {
                fileList.push(file);
              }
            } else if (item.kind === 'string') {
              // 文件名称
              item.getAsString(function () {
                console.log('图片上传');
              });
            }
          }
        }
        // 如果剪切板上有文件数据，则添加对应组件，否则执行复制组件操作
        if (fileList.length) {
          addComponentByDrop(fileList);
        } else {
          Mousetrap.trigger('ctrl+v');
        }
      }
    };

    if (componentCopyable) {
      // 复制
      Mousetrap.bind(['command+d', 'ctrl+d'], (e) => {
        e.preventDefault && e.preventDefault();
        copyComponents({ offsetX: 0, offsetY: 0 });
      });

      // 拷贝
      Mousetrap.bind(['command+c', 'ctrl+c'], () => {
        clearClipboard(); // 清除剪切板
        copyComponentsToClipboard(type);
      });

      // 粘贴
      Mousetrap.bind(['command+v', 'ctrl+v'], (e) => {
        // 非ctrl + v 组合键直接触发的（右键）
        if (!e.isTrusted) {
          pasteComponents(type);
        }
      });

      Mousetrap.bind(['command+shift+v', 'ctrl+shift+v'], (e) => {
        e.preventDefault && e.preventDefault();
        pasteComponents(type, true); // true为以画布中心粘贴
      });

      window.addEventListener('paste', onPaste);
    }

    return () => {
      Mousetrap.unbind(['command+d', 'ctrl+d']);
      Mousetrap.unbind(['command+c', 'ctrl+c']);
      Mousetrap.unbind(['command+v', 'ctrl+v']);
      Mousetrap.unbind(['command+shift+v', 'ctrl+shift+v']);
      window.removeEventListener('paste', onPaste);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [componentCopyable]);

  return null;
}

const mapDispatchToProps = {
  addComponentByDrop,
  nodeManagementPositioning
};

export default connect(null, mapDispatchToProps)(memo(RegisterHotKey));
