import { UnifiedModal } from '../common/UnifiedModal';
import { IMAGE_CANVAS_SHORTCUT_SECTIONS } from './ImageCanvasShortcutModel';

type ImageCanvasShortcutDialogViewProps = {
  open: boolean;
  onClose: () => void;
};

export function ImageCanvasShortcutDialogView({
  open,
  onClose,
}: ImageCanvasShortcutDialogViewProps) {
  return (
    <UnifiedModal
      open={open}
      title="画布快捷键"
      size="lg"
      onClose={onClose}
      panelClassName="image-canvas-editor__shortcut-modal"
      bodyClassName="image-canvas-editor__shortcut-modal-body"
    >
      <div className="image-canvas-editor__shortcut-sections">
        {IMAGE_CANVAS_SHORTCUT_SECTIONS.map((section) => (
          <section
            key={section.title}
            className="image-canvas-editor__shortcut-section"
            aria-labelledby={`image-canvas-shortcut-${section.title}`}
          >
            <h3 id={`image-canvas-shortcut-${section.title}`}>
              {section.title}
            </h3>
            <dl className="image-canvas-editor__shortcut-list">
              {section.items.map((item) => (
                <div
                  key={`${section.title}-${item.action}`}
                  className="image-canvas-editor__shortcut-row"
                >
                  <dt>
                    {item.action}
                    {item.status === 'new' ? <span>新增</span> : null}
                  </dt>
                  <dd>
                    {item.keys.map((key, index) => (
                      <span key={`${item.action}-${key}-${index}`}>
                        {index > 0 ? (
                          <span
                            className="image-canvas-editor__shortcut-plus"
                            aria-hidden="true"
                          >
                            +
                          </span>
                        ) : null}
                        <kbd>{key}</kbd>
                      </span>
                    ))}
                  </dd>
                </div>
              ))}
            </dl>
          </section>
        ))}
      </div>
    </UnifiedModal>
  );
}