/*
 * @Author: zhoux zhouxia@supervision.ltd
 * @Date: 2023-12-05 11:41:37
 * @LastEditors: zhoux zhouxia@supervision.ltd
 * @LastEditTime: 2023-12-05 16:20:46
 * @FilePath: \react-adpro-fabric\src\pages\Fabric\components\help\ShortcutHelp.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';

// eslint-disable-next-line react-hooks/rules-of-hooks

const shortcuts = [
  [
    { key: ['esc'], description: 'fabric.shortcut.escape' },
    { key: ['h'], description: 'fabric.shortcut.h' },
    { key: ['q'], description: 'fabric.shortcut.q' },
    { key: ['w'], description: 'fabric.shortcut.w' },
    { key: ['o'], description: 'fabric.shortcut.o' },
    { key: ['p'], description: 'fabric.shortcut.p' },
    { key: ['+'], description: 'fabric.shortcut.plus' },
    {
      key: ['-'],
      description: 'fabric.shortcut.minus',
    },
    {
      key: ['↑'],
      description: 'fabric.shortcut.arrow-up',
    },
    {
      key: ['↓'],
      description: 'fabric.shortcut.arrow-down',
    },
    {
      key: ['←'],
      description: 'fabric.shortcut.arrow-left',
    },
    {
      key: ['→'],
      description: 'fabric.shortcut.arrow-right',
    },
  ],
  [
    {
      key: ['delete | backspace'],
      description: 'fabric.shortcut.delete',
    },
    {
      key: ['ctrl | cmd', 'a'],
      description: 'fabric.shortcut.ctrl-a',
    },
    {
      key: ['ctrl | cmd', 'c'],
      description: 'fabric.shortcut.ctrl-c',
    },
    {
      key: ['ctrl | cmd', 'v'],
      description: 'fabric.shortcut.ctrl-v' ,
    },
    {
      key: ['ctrl | cmd', 'x'],
      description: 'fabric.shortcut.ctrl-x',
    },
    {
      key: ['ctrl | cmd', 'z'],
      description: 'fabric.shortcut.ctrl-z',
    },
    {
      key: ['ctrl | cmd', 'y'],
      description: 'fabric.shortcut.ctrl-y',
    },
    {
      key: ['alt', 'mouse left'],
      description: 'fabric.shortcut.alt-mouse-left',
    },
    {
      key: ['shift', 'mouse left'],
      description: 'fabric.shortcut.shfit-mouse-left',
    },
    {
      key: ['mouse left'],
      description: 'fabric.shortcut.mouse-left',
    },
    {
      key: ['mouse right'],
      description: 'fabric.shortcut.mouse-right',
    },
  ],
];

const ShortcutHelp: React.FC = () => {
  return (
    <div className="rde-shortcut-help">
      {shortcuts.map((column, idx) => {
        return (
          <ul className="rde-shortcut-help-list" key={idx}>
            {column.map((shortcut) => {
              return (
                <li key={shortcut.key.toString()} className="rde-shortcut-help-key">
                  {shortcut.key.map((key) => {
                    return (
                      <kbd key={key} className="rde-shortcut-help-key-unit">
                        <span>{key}</span>
                      </kbd>
                    );
                  })}
                  <span className="rde-shortcut-help-key-def">{shortcut.description}</span>
                </li>
              );
            })}
          </ul>
        );
      })}
    </div>
  );
};

export default ShortcutHelp;
