import*as ComponentHelpers from"../component_helpers/component_helpers.js";import*as i18n from"../i18n/i18n.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";import{DEFAULT_MODE_MAPPING,format,isNumber,isValidMode,VALUE_TYPE_MODE_LIST,valueTypeModeToLocalizedString,valueTypeToLocalizedString}from"./ValueInterpreterDisplayUtils.js";const UIStrings={unsignedValue:"Unsigned value",changeValueTypeMode:"Change mode",signedValue:"Signed value"},str_=i18n.i18n.registerUIStrings("linear_memory_inspector/ValueInterpreterDisplay.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html}=LitHtml,getStyleSheets=ComponentHelpers.GetStylesheet.getStyleSheets,SORTED_VALUE_TYPES=Array.from(DEFAULT_MODE_MAPPING.keys());export class ValueTypeModeChangedEvent extends Event{constructor(e,t){super("value-type-mode-changed",{composed:!0}),this.data={type:e,mode:t}}}export class ValueInterpreterDisplay extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.endianness="Little Endian",this.buffer=new ArrayBuffer(0),this.valueTypes=new Set,this.valueTypeModeConfig=DEFAULT_MODE_MAPPING,this.shadow.adoptedStyleSheets=[...getStyleSheets("ui/inspectorCommon.css",{enableLegacyPatching:!0})]}set data(e){this.buffer=e.buffer,this.endianness=e.endianness,this.valueTypes=e.valueTypes,this.valueTypeModeConfig=DEFAULT_MODE_MAPPING,e.valueTypeModes&&e.valueTypeModes.forEach(((e,t)=>{isValidMode(t,e)&&this.valueTypeModeConfig.set(t,e)})),this.render()}render(){render(html`
      <style>
        :host {
          flex: auto;
          display: flex;
        }

        .mode-type {
          color: var(--text-highlight-color); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }

        .value-types {
          width: 100%;
          display: grid;
          grid-template-columns: auto auto 1fr;
          grid-column-gap: 24px;
          grid-row-gap: 4px;
          overflow: hidden;
          padding: 2px 12px;
        }

        .value-type-cell-multiple-values {
          gap: 5px;
        }

        .value-type-cell {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          display: flex;
          align-items: center;
        }

        .value-type-cell-no-mode {
          grid-column: 1 / 3;
        }

      </style>
      <div class="value-types">
        ${SORTED_VALUE_TYPES.map((e=>this.valueTypes.has(e)?this.showValue(e):""))}
      </div>
    `,this.shadow,{eventContext:this})}showValue(e){if(!this.valueTypeModeConfig.get(e))throw new Error(`No mode found for type ${e}`);const t=valueTypeToLocalizedString(e),s=this.parse({type:e,signed:!1}),l=this.parse({type:e,signed:!0}),a=l!==s;return html`
      ${isNumber(e)?html`
          <span class="value-type-cell">${t}</span>
            <select title=${i18nString(UIStrings.changeValueTypeMode)} data-mode-settings="true"  class="chrome-select" @change=${this.onValueTypeModeChange.bind(this,e)}>
              ${VALUE_TYPE_MODE_LIST.filter((t=>isValidMode(e,t))).map((t=>html`<option value=${t} .selected=${this.valueTypeModeConfig.get(e)===t}>${valueTypeModeToLocalizedString(t)}</option>`))}
            </select>`:html`
          <span class="value-type-cell-no-mode value-type-cell">${t}</span>`}

        ${a?html`
          <div class="value-type-cell-multiple-values value-type-cell">
            <span data-value="true" title=${i18nString(UIStrings.unsignedValue)}>${s}</span>
            <span>/<span>
            <span data-value="true" title=${i18nString(UIStrings.signedValue)}>${l}</span>
          </div>`:html`
          <span class="value-type-cell" data-value="true">${s}</span>`}
    `}onValueTypeModeChange(e,t){t.preventDefault();const s=t.target.value;this.dispatchEvent(new ValueTypeModeChangedEvent(e,s))}parse(e){const t=this.valueTypeModeConfig.get(e.type);return t?format({buffer:this.buffer,type:e.type,endianness:this.endianness,signed:e.signed||!1,mode:t}):(console.error(`No known way of showing value for ${e.type}`),"N/A")}}customElements.define("devtools-linear-memory-inspector-interpreter-display",ValueInterpreterDisplay);