import*as LitHtml from"../../lit-html/lit-html.js";import*as ComponentHelpers from"../helpers/helpers.js";import*as IconButton from"../icon_button/icon_button.js";import linearMemoryValueInterpreterStyles from"./linearMemoryValueInterpreter.css.js";import{ValueInterpreterDisplay}from"./ValueInterpreterDisplay.js";import{ValueInterpreterSettings}from"./ValueInterpreterSettings.js";import*as i18n from"../../../core/i18n/i18n.js";const UIStrings={toggleValueTypeSettings:"Toggle value type settings",changeEndianness:"Change `Endianness`"},str_=i18n.i18n.registerUIStrings("ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html}=LitHtml;export class EndiannessChangedEvent extends Event{static eventName="endiannesschanged";data;constructor(e){super(EndiannessChangedEvent.eventName),this.data=e}}export class ValueTypeToggledEvent extends Event{static eventName="valuetypetoggled";data;constructor(e,t){super(ValueTypeToggledEvent.eventName),this.data={type:e,checked:t}}}export class LinearMemoryValueInterpreter extends HTMLElement{static litTagName=LitHtml.literal`devtools-linear-memory-inspector-interpreter`;#e=this.attachShadow({mode:"open"});#t="Little Endian";#n=new ArrayBuffer(0);#s=new Set;#a=new Map;#i=0;#r=!1;connectedCallback(){this.#e.adoptedStyleSheets=[linearMemoryValueInterpreterStyles]}set data(e){this.#t=e.endianness,this.#n=e.value,this.#s=e.valueTypes,this.#a=e.valueTypeModes||new Map,this.#i=e.memoryLength,this.#o()}#o(){render(html`
      <div class="value-interpreter">
        <div class="settings-toolbar">
          ${this.#l()}
          <button data-settings="true" class="settings-toolbar-button ${this.#r?"active":""}" title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${this.#d}>
            <${IconButton.Icon.Icon.litTagName}
              .data=${{iconName:"gear",color:"var(--icon-default)",width:"20px"}}>
            </${IconButton.Icon.Icon.litTagName}>
          </button>
        </div>
        <span class="divider"></span>
        <div>
          ${this.#r?html`
              <${ValueInterpreterSettings.litTagName}
                .data=${{valueTypes:this.#s}}
                @typetoggle=${this.#g}>
              </${ValueInterpreterSettings.litTagName}>`:html`
              <${ValueInterpreterDisplay.litTagName}
                .data=${{buffer:this.#n,valueTypes:this.#s,endianness:this.#t,valueTypeModes:this.#a,memoryLength:this.#i}}>
              </${ValueInterpreterDisplay.litTagName}>`}
        </div>
      </div>
    `,this.#e,{host:this})}#p(e){e.preventDefault();const t=e.target.value;this.dispatchEvent(new EndiannessChangedEvent(t))}#l(){const e=this.#p.bind(this);return html`
    <label data-endianness-setting="true" title=${i18nString(UIStrings.changeEndianness)}>
      <select class="chrome-select"
        style="border: none; background-color: transparent; cursor: pointer;"
        data-endianness="true" @change=${e}>
        ${["Little Endian","Big Endian"].map((e=>html`<option value=${e} .selected=${this.#t===e}>${i18n.i18n.lockedString(e)}</option>`))}
      </select>
    </label>
    `}#d(){this.#r=!this.#r,this.#o()}#g(e){this.dispatchEvent(new ValueTypeToggledEvent(e.data.type,e.data.checked))}}ComponentHelpers.CustomElements.defineComponent("devtools-linear-memory-inspector-interpreter",LinearMemoryValueInterpreter);