import*as LitHtml from"../third_party/lit-html/lit-html.js";import{valueTypeToLocalizedString}from"./ValueInterpreterDisplayUtils.js";const{render:render,html:html}=LitHtml,GROUP_TO_TYPES=new Map([["Integer",["Integer 8-bit","Integer 16-bit","Integer 32-bit","Integer 64-bit"]],["Floating point",["Float 32-bit","Float 64-bit"]]]);export class TypeToggleEvent extends Event{constructor(e,t){super("type-toggle"),this.data={type:e,checked:t}}}export class ValueInterpreterSettings extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.valueTypes=new Set}set data(e){this.valueTypes=e.valueTypes,this.render()}render(){render(html`
      <style>
        :host {
          flex: auto;
          display: flex;
          min-height: 20px;
        }

        .settings {
          display: flex;
          flex-wrap: wrap;
          margin: 0 12px 12px 12px;
          column-gap: 45px;
          row-gap: 15px;
        }

        .value-types-selection {
          display: flex;
          flex-direction: column;
        }

        .value-types-selection + .value-types-selection {
          margin-left: 45px;
        }

        .group {
          font-weight: bold;
          margin-bottom: 11px;
        }

        .type-label {
          white-space: nowrap;
        }

        .group + .type-label {
          margin-top: 5px;
        }

        .type-label input {
          margin: 0 6px 0 0;
          padding: 0;
        }

        .type-label + .type-label {
          margin-top: 6px;
        }
      </style>
      <div class="settings">
       ${[...GROUP_TO_TYPES.keys()].map((e=>html`
          <div class="value-types-selection">
            <span class="group">${e}</span>
            ${this.plotTypeSelections(e)}
          </div>
        `))}
      </div>
      `,this.shadow,{eventContext:this})}plotTypeSelections(e){const t=GROUP_TO_TYPES.get(e);if(!t)throw new Error(`Unknown group ${e}`);return html`
      ${t.map((e=>html`
          <label class="type-label" title=${valueTypeToLocalizedString(e)}>
            <input data-input="true" type="checkbox" .checked=${this.valueTypes.has(e)} @change=${t=>this.onTypeToggle(e,t)}>
            <span data-title="true">${valueTypeToLocalizedString(e)}</span>
          </label>
     `))}`}onTypeToggle(e,t){const l=t.target;this.dispatchEvent(new TypeToggleEvent(e,l.checked))}}customElements.define("devtools-linear-memory-inspector-interpreter-settings",ValueInterpreterSettings);