class ShortcutSettings extends LitElement {
  private recorder = new HotkeyRecorderController(this, {
    onRecord: (hotkey) => {
      this.shortcut = hotkey
      this.requestUpdate()
    },
    onCancel: () => {
      console.log('Recording cancelled')
    },
  })

  private shortcut: Hotkey | null = null

  render() {
    return html`
      <button @click=${() => this.recorder.startRecording()}>
        ${this.recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}
      </button>
      ${this.recorder.recordedHotkey
        ? html`<div>Recording: ${this.recorder.recordedHotkey}</div>`
        : nothing}
    `
  }
}

class ShortcutSettings extends LitElement {
  private recorder = new HotkeyRecorderController(this, {
    onRecord: (hotkey) => {
      this.shortcut = hotkey
      this.requestUpdate()
    },
    onCancel: () => {
      console.log('Recording cancelled')
    },
  })

  private shortcut: Hotkey | null = null

  render() {
    return html`
      <button @click=${() => this.recorder.startRecording()}>
        ${this.recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}
      </button>
      ${this.recorder.recordedHotkey
        ? html`<div>Recording: ${this.recorder.recordedHotkey}</div>`
        : nothing}
    `
  }
}

new HotkeyRecorderController(_host, _options): HotkeyRecorderController;

new HotkeyRecorderController(_host, _options): HotkeyRecorderController;

get isRecording(): boolean;

get isRecording(): boolean;

get recordedHotkey(): Hotkey | null;

get recordedHotkey(): Hotkey | null;

cancelRecording(): void;

cancelRecording(): void;

hostConnected(): void;

hostConnected(): void;

ReactiveController.hostConnected

ReactiveController.hostConnected

hostDisconnected(): void;

hostDisconnected(): void;

ReactiveController.hostDisconnected

ReactiveController.hostDisconnected

setOptions(options): void;

setOptions(options): void;

startRecording(): void;

startRecording(): void;

stopRecording(): void;

stopRecording(): void;