import React from 'react';
import styles from './ShortcutsPanel.less';

const shortcuts = [
  {
    name: '成组',
    value: ['ctrl', 'G']
  },
  {
    name: '取消成组',
    value: ['ctrl', 'shift', 'G']
  },
  {
    name: '上移一层',
    value: ['ctrl', 'alt', '↑']
  },
  {
    name: '下移一层',
    value: ['ctrl', 'alt', '↓']
  },
  {
    name: '置顶',
    value: ['ctrl', 'shift', '↑']
  },
  {
    name: '置底',
    value: ['ctrl', 'shift', '↓']
  },
  {
    name: '删除',
    value: ['delete']
  },
  {
    name: '撤回',
    value: ['ctrl', 'Z']
  },
  {
    name: '加选',
    value: ['ctrl', '单击']
  },
  {
    name: '跨选',
    value: ['shift', '单击']
  },
  {
    name: '复制',
    value: ['ctrl', 'D']
  },
  {
    name: '锁定/解锁',
    value: ['ctrl', 'shift', 'L']
  },
  {
    name: '显示/隐藏',
    value: ['ctrl', 'shift', 'H']
  },
  {
    name: '等比缩放',
    value: ['shift', '拖拽']
  },
  {
    name: '拖动画布',
    value: ['按住空格', '移动画布']
  },
  {
    name: '放大',
    value: ['ctrl', '=']
  },
  {
    name: '缩小',
    value: ['ctrl', '-']
  },
  {
    name: '画布适合窗口大小',
    value: ['ctrl', '2']
  },
  {
    name: '显示/隐藏左侧边栏',
    value: ['alt', 'ctrl', '1']
  },
  {
    name: '显示/隐藏右侧边栏',
    value: ['alt', 'ctrl', '2']
  },
  {
    name: '拷贝',
    value: ['ctrl', 'C']
  },
  {
    name: '粘贴',
    value: ['ctrl', 'V']
  },
  {
    name: '跨组件选择',
    value: ['ctrl', '点击']
  },
  {
    name: '跨组件拖拽',
    value: ['ctrl', 'alt', '拖拽']
  },
  {
    name: '全局搜索',
    value: ['ctrl', 'F']
  },
  {
    name: '拷贝组件样式',
    value: ['ctrl', 'alt', 'C']
  },
  {
    name: '粘贴组件样式',
    value: ['ctrl', 'alt', 'V']
  }
];

const icons = {
  ctrl: 'icon-connnandjian-',
  shift: 'icon-shift-',
  alt: 'icon-altjian-'
};

export default function ShortcutsPanel({ onClose }) {
  const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <span>快捷键</span>
        <i className="icon iconfont icon-btn_close" onClick={onClose} />
      </div>
      <ul className={styles.content}>
        {shortcuts.map((d, i) => (
          <li className={styles.item} key={i}>
            <span>{d.name}</span>
            <span className={styles.key}>
              {d.value.reduce((all: any, item, index) => {
                all.push(
                  <span className={styles.mark} key={item}>
                    {icons[item] ? isMac ? <i className={`icon iconfont ${icons[item]}`} /> : item : item}
                  </span>
                );
                if (index !== d.value.length - 1) {
                  all.push(
                    <span className={styles.connect} key={item + index}>
                      +
                    </span>
                  );
                }
                return all;
              }, [])}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}
