import { Component } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'

const SYMBOLS = {
  meta: '⌘', // ⌘
  control: '⌃', // ⌃
  shift: '⇧', // ⇧
  left: '←', // ←
  right: '→', // →
  up: '↑', // ↑
  down: '↓', // ↓
  arrowleft: '←', // ←
  arrowright: '→', // →
}

@Component({
  selector: 'pngx-hotkey-dialog',
  templateUrl: './hotkey-dialog.component.html',
  styleUrl: './hotkey-dialog.component.scss',
  standalone: false,
})
export class HotkeyDialogComponent {
  public title: string = $localize`Keyboard shortcuts`
  public hotkeys: Map<string, string> = new Map()

  constructor(public activeModal: NgbActiveModal) {}

  public close(): void {
    this.activeModal.close()
  }

  public formatKey(key: string, macOS: boolean = false): string {
    if (macOS) {
      key = key.replace('control', 'meta')
    }
    return key
      .split('.')
      .map((k) => SYMBOLS[k] || k)
      .join(' ')
  }
}