import"./ValueInterpreterDisplay.js";import"./ValueInterpreterSettings.js";import*as ComponentHelpers from"../component_helpers/component_helpers.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";import{endiannessToLocalizedString}from"./ValueInterpreterDisplayUtils.js";import*as i18n from"../i18n/i18n.js";const UIStrings={toggleValueTypeSettings:"Toggle value type settings",changeEndianness:"Change Endianness"},str_=i18n.i18n.registerUIStrings("linear_memory_inspector/LinearMemoryValueInterpreter.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html}=LitHtml,getStyleSheets=ComponentHelpers.GetStylesheet.getStyleSheets;export class EndiannessChangedEvent extends Event{constructor(e){super("endianness-changed"),this.data=e}}export class ValueTypeToggledEvent extends Event{constructor(e,t){super("value-type-toggled"),this.data={type:e,checked:t}}}export class LinearMemoryValueInterpreter 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=new Map,this.showSettings=!1,this.shadow.adoptedStyleSheets=[...getStyleSheets("ui/inspectorCommon.css",{enableLegacyPatching:!0})]}set data(e){this.endianness=e.endianness,this.buffer=e.value,this.valueTypes=e.valueTypes,this.valueTypeModeConfig=e.valueTypeModes||new Map,this.render()}render(){render(html`
      <style>
        :host {
          flex: auto;
          display: flex;
        }

        .value-interpreter {
          --text-highlight-color: #80868b;

          border: var(--divider-border, 1px solid #d0d0d0); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
          background-color: var(--toolbar-bg-color, #f3f3f3); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
          overflow: hidden;
          width: 400px;
        }

        .settings-toolbar {
          min-height: 26px;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          padding-left: 12px;
          padding-right: 12px;
          align-items: center;
        }

        .settings-toolbar-button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 20px;
          height: 20px;
          border: none;
          background-color: transparent;
          cursor: pointer;
        }

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

        .settings-toolbar-button.active devtools-icon {
          --icon-color: var(--color-primary);
        }

        .divider {
          display: block;
          height: 1px;
          margin-bottom: 12px;
          background-color: var(--divider-color, #d0d0d0); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }
      </style>
      <div class="value-interpreter">
        <div class="settings-toolbar">
          ${this.renderEndiannessSetting()}
          <button data-settings="true" class="settings-toolbar-button ${this.showSettings?"active":""}" title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${this.onSettingsToggle}>
            <devtools-icon
              .data=${{iconName:"settings_14x14_icon",color:"var(--color-text-secondary)",width:"14px"}}>
            </devtools-icon>
          </button>
        </div>
        <span class="divider"></span>
        <div>
          ${this.showSettings?html`
              <devtools-linear-memory-inspector-interpreter-settings
                .data=${{valueTypes:this.valueTypes}}
                @type-toggle=${this.onTypeToggle}>
              </devtools-linear-memory-inspector-interpreter-settings>`:html`
              <devtools-linear-memory-inspector-interpreter-display
                .data=${{buffer:this.buffer,valueTypes:this.valueTypes,endianness:this.endianness,valueTypeModes:this.valueTypeModeConfig}}
              </devtools-linear-memory-inspector-interpreter-display>`}
        </div>
      </div>
    `,this.shadow,{eventContext:this})}onEndiannessChange(e){e.preventDefault();const t=e.target.value;this.dispatchEvent(new EndiannessChangedEvent(t))}renderEndiannessSetting(){const e=this.onEndiannessChange.bind(this);return html`
    <label data-endianness-setting="true" title=${i18nString(UIStrings.changeEndianness)}>
      <select class="chrome-select" data-endianness="true" @change=${e}>
        ${["Little Endian","Big Endian"].map((e=>html`<option value=${e} .selected=${this.endianness===e}>${endiannessToLocalizedString(e)}</option>`))}
      </select>
    </label>
    `}onSettingsToggle(){this.showSettings=!this.showSettings,this.render()}onTypeToggle(e){this.dispatchEvent(new ValueTypeToggledEvent(e.data.type,e.data.checked))}}customElements.define("devtools-linear-memory-inspector-interpreter",LinearMemoryValueInterpreter);