import*as i18n from"../../../core/i18n/i18n.js";import*as Buttons from"../../../ui/components/buttons/buttons.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import{Dialog as DialogElement}from"./Dialog.js";import shortcutDialogStyles from"./shortcutDialog.css.js";const UIStrings={showShortcutTitle:"Show shortcuts",dialogTitle:"Keyboard shortcuts",close:"Close"},str_=i18n.i18n.registerUIStrings("ui/components/dialogs/ShortcutDialog.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ShowDialog extends Event{static eventName="showdialog";constructor(){super(ShowDialog.eventName)}}export class ShortcutDialog extends HTMLElement{static litTagName=LitHtml.literal`devtools-shortcut-dialog`;#t=this.attachShadow({mode:"open"});#e=this.#o.bind(this);#i=null;#s=null;#n=[];#l=!1;connectedCallback(){this.#t.adoptedStyleSheets=[shortcutDialogStyles]}set data(t){this.#n=t.shortcuts,t.open&&(this.#l=t.open),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#e)}#r(){if(!this.#i)throw new Error("Dialog not found");this.#i.setDialogVisible(!0),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#e),this.dispatchEvent(new ShowDialog)}#a(t){if(!this.#i)throw new Error("Dialog not found");this.#i.setDialogVisible(!1),t&&t.stopImmediatePropagation(),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#e)}#o(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("Shortcut dialog render was not scheduled");LitHtml.render(LitHtml.html`
      <${Buttons.Button.Button.litTagName}
        @click=${this.#r}
        on-render=${ComponentHelpers.Directives.nodeRenderedCallback((t=>{this.#s=t}))}
        .data=${{variant:"toolbar",iconName:"help",title:i18nString(UIStrings.showShortcutTitle),iconWidth:"16px"}}
      ></${Buttons.Button.Button.litTagName}>
      <${DialogElement.litTagName}
        @clickoutsidedialog=${this.#a}
        .showConnector=${!0}
        .origin=${()=>{if(!this.#s)throw new Error("Button not found");return this.#s}}
        .position=${"bottom"}
        .horizontalAlignment=${"right"}
        on-render=${ComponentHelpers.Directives.nodeRenderedCallback((t=>{this.#i=t}))}
      >
        <div class="keybinds-category-header">
          <span class="keybinds-category-header-text">${i18nString(UIStrings.dialogTitle)}</span>
          <${Buttons.Button.Button.litTagName}
            @click=${this.#a}
            class='close-icon'
            .data=${{variant:"toolbar",iconName:"cross",title:i18nString(UIStrings.close)}}
          ></${Buttons.Button.Button.litTagName}>
        </div>
        <ul class="keybinds-list">
          ${this.#n.map((t=>LitHtml.html`
              <li class="keybinds-list-item">
                <div class="keybinds-action-name keybinds-list-text">${t.title}</div>
                ${t.bindings.map(((e,o)=>LitHtml.html`
                    <div class="keybinds-shortcut keybinds-list-text">
                      <span class="keybinds-key">${e}</span>
                    </div>
                    ${t.bindings.at(o+1)?LitHtml.html`<span class="keybinds-shortcut-separator"> - </span>`:LitHtml.nothing}
                `))}
              </li>`))}
        </ul>
      </${DialogElement.litTagName}>
      `,this.#t,{host:this}),this.#l&&(this.#r(),this.#l=!1)}}ComponentHelpers.CustomElements.defineComponent("devtools-shortcut-dialog",ShortcutDialog);