import*as i18n from"../i18n/i18n.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";const UIStrings={enterAddress:"Enter address",goBackInAddressHistory:"Go back in address history",goForwardInAddressHistory:"Go forward in address history",previousPage:"Previous page",nextPage:"Next page",refresh:"Refresh"},str_=i18n.i18n.registerUIStrings("linear_memory_inspector/LinearMemoryNavigator.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html}=LitHtml;export class AddressInputChangedEvent extends Event{constructor(t,e){super("address-input-changed"),this.data={address:t,mode:e}}}export class PageNavigationEvent extends Event{constructor(t){super("page-navigation",{}),this.data=t}}export class HistoryNavigationEvent extends Event{constructor(t){super("history-navigation",{}),this.data=t}}export class RefreshRequestedEvent extends Event{constructor(){super("refresh-requested",{})}}export class LinearMemoryNavigator extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.address="0",this.error=void 0,this.valid=!0}set data(t){this.address=t.address,this.error=t.error,this.valid=t.valid,this.render();const e=this.shadow.querySelector(".address-input");e&&("Submitted"===t.mode?e.blur():"InvalidSubmit"===t.mode&&e.select())}render(){const t=html`
      <style>
        .navigator {
          min-height: 24px;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          overflow: hidden;
          align-items: center;
          background-color: var(--color-background);
          color: var(--color-text-primary);
        }

        .navigator-item {
          display: flex;
          white-space: nowrap;
          overflow: hidden;
        }

        .address-input {
          text-align: center;
          outline: none;
          color: var(--color-text-primary);
          border: 1px solid var(--color-background-elevation-2);
          background: transparent;
        }

        .address-input.invalid {
          color: var(--color-accent-red);
        }

        .navigator-button {
          display: flex;
          width: 20px;
          height: 20px;
          background: transparent;
          overflow: hidden;
          border: none;
          padding: 0;
          outline: none;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }

        .navigator-button devtools-icon {
          height: 14px;
          width: 14px;
          min-height: 14px;
          min-width: 14px;
        }

        .navigator-button:hover devtools-icon {
          --icon-color: var(--color-text-primary);
        }

        .navigator-button:focus devtools-icon {
          --icon-color: var(--color-text-secondary);
        }
        </style>
      <div class="navigator">
        <div class="navigator-item">
          ${this.createButton("ic_undo_16x16_icon",i18nString(UIStrings.goBackInAddressHistory),new HistoryNavigationEvent("Backward"))}
          ${this.createButton("ic_redo_16x16_icon",i18nString(UIStrings.goForwardInAddressHistory),new HistoryNavigationEvent("Forward"))}
        </div>
        <div class="navigator-item">
          ${this.createButton("ic_page_prev_16x16_icon",i18nString(UIStrings.previousPage),new PageNavigationEvent("Backward"))}
          ${this.createAddressInput()}
          ${this.createButton("ic_page_next_16x16_icon",i18nString(UIStrings.nextPage),new PageNavigationEvent("Forward"))}
        </div>
        ${this.createButton("refresh_12x12_icon",i18nString(UIStrings.refresh),new RefreshRequestedEvent)}
      </div>
      `;render(t,this.shadow,{eventContext:this})}createAddressInput(){const t={"address-input":!0,invalid:!this.valid};return html`
      <input class=${LitHtml.Directives.classMap(t)} data-input="true" .value=${this.address}
        title=${this.valid?i18nString(UIStrings.enterAddress):this.error} @change=${this.onAddressChange.bind(this,"Submitted")} @input=${this.onAddressChange.bind(this,"Edit")}/>`}onAddressChange(t,e){const r=e.target;this.dispatchEvent(new AddressInputChangedEvent(r.value,t))}createButton(t,e,r){return html`
      <button class="navigator-button"
        data-button=${r.type} title=${e}
        @click=${this.dispatchEvent.bind(this,r)}>
        <devtools-icon .data=${{iconName:t,color:"var(--color-text-secondary)",width:"14px"}}>
        </devtools-icon>
      </button>`}}customElements.define("devtools-linear-memory-inspector-navigator",LinearMemoryNavigator);