import*as i18n from"../i18n/i18n.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";import{findIcon}from"./CSSPropertyIconResolver.js";const UIStrings={selectButton:"Add {propertyName}: {propertyValue}",deselectButton:"Remove {propertyName}: {propertyValue}"},str_=i18n.i18n.registerUIStrings("elements/FlexboxEditor.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html,Directives:Directives}=LitHtml;export class PropertySelectedEvent extends Event{constructor(e,t){super("property-selected",{}),this.data={name:e,value:t}}}export class PropertyDeselectedEvent extends Event{constructor(e,t){super("property-deselected",{}),this.data={name:e,value:t}}}export class FlexboxEditor extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.authoredProperties=new Map,this.computedProperties=new Map}set data(e){this.authoredProperties=e.authoredProperties,this.computedProperties=e.computedProperties,this.render()}render(){render(html`
      <style>
        .container {
          padding: 12px;
          min-width: 170px;
        }

        .row {
          padding: 0;
          color: var(--color-text-primary);
          padding-bottom: 16px;
        }

        .row:last-child {
          padding-bottom: 0;
        }

        .property {
          padding-bottom: 4px;
          white-space: nowrap;
        }

        .property-name {
          color: var(--color-syntax-1);
        }

        .property-value {
          color: var(--color-text-primary);
        }

        .property-value.computed {
          color: var(--color-text-disabled);
        }

        .buttons {
          display: flex;
          flex-direction: row;
        }

        .buttons > :first-child {
          border-radius: 3px 0 0 3px;
        }

        .buttons > :last-child {
          border-radius: 0 3px 3px 0;
        }

        .button {
          border: 1px solid var(--color-background-elevation-2);
          background-color: var(--color-background);
          width: 24px;
          height: 24px;
          min-width: 24px;
          min-height: 24px;
          padding: 0;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }

        .button:focus-visible {
          outline: auto 5px -webkit-focus-ring-color;
        }

        .button devtools-icon {
          --icon-color: var(--color-text-secondary);
        }

        .button.selected {
          background-color: var(--color-background-elevation-1);
        }

        .button.selected devtools-icon {
          --icon-color: var(--color-primary);
        }
      </style>
      <div class="container">
        ${EditableProperties.map((e=>this.renderProperty(e)))}
      </div>
    `,this.shadow,{eventContext:this})}renderProperty(e){const t=!this.authoredProperties.has(e.propertyName),r=this.authoredProperties.get(e.propertyName),o=r||this.computedProperties.get(e.propertyName),s=Directives.classMap({"property-value":!0,computed:t});return html`<div class="row">
      <div class="property">
        <span class="property-name">${e.propertyName}</span>: <span class=${s}>${o}</span>
      </div>
      <div class="buttons">
        ${e.propertyValues.map((t=>this.renderButton(t,e.propertyName,t===r)))}
      </div>
    </div>`}renderButton(e,t,r=!1){const o=`${t}: ${e}`,s=findIcon(o,this.computedProperties);if(!s)throw new Error(`Icon for ${o} is not found`);const n=`transform: rotate(${s.rotate}deg) scale(${s.scaleX}, ${s.scaleY})`,i=Directives.classMap({button:!0,selected:r}),p=i18nString(r?UIStrings.deselectButton:UIStrings.selectButton,{propertyName:t,propertyValue:e});return html`<button title=${p} class=${i} @click=${()=>this.onButtonClick(t,e,r)}>
       <devtools-icon style=${n} .data=${{iconName:s.iconName,color:"var(--icon-color)",width:"18px",height:"18px"}}></devtools-icon>
    </button>`}onButtonClick(e,t,r){r?this.dispatchEvent(new PropertyDeselectedEvent(e,t)):this.dispatchEvent(new PropertySelectedEvent(e,t))}}customElements.define("devtools-flexbox-editor",FlexboxEditor);export const EditableProperties=[{propertyName:"flex-direction",propertyValues:["row","column"]},{propertyName:"flex-wrap",propertyValues:["nowrap","wrap"]},{propertyName:"align-content",propertyValues:["center","flex-start","flex-end","space-around","space-between","stretch"]},{propertyName:"justify-content",propertyValues:["center","flex-start","flex-end","space-between","space-around","space-evenly"]},{propertyName:"align-items",propertyValues:["center","flex-start","flex-end","stretch","baseline"]}];