import*as i18n from"../i18n/i18n.js";import*as Components from"../ui/components/components.js";import*as UI from"../ui/ui.js";import{EditableProperties,FlexboxEditor}from"./FlexboxEditor.js";import{StylePropertyTreeElement}from"./StylePropertyTreeElement.js";const UIStrings={editorButton:"Open Flexbox editor"},str_=i18n.i18n.registerUIStrings("elements/FlexboxEditorWidget.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let instance=null;export class FlexboxEditorWidget extends UI.Widget.VBox{constructor(){super(!0),this.contentElement.tabIndex=0,this.setDefaultFocusedElement(this.contentElement),this.editor=new FlexboxEditor,this.editor.data={authoredProperties:new Map,computedProperties:new Map},this.contentElement.appendChild(this.editor),this.onPropertySelected=this.onPropertySelected.bind(this),this.onPropertyDeselected=this.onPropertyDeselected.bind(this)}getSection(){return this.section}async onPropertySelected(e){if(!this.section)return;const t=ensureTreeElementForProperty(this.section,e.data.name);t.property.value=e.data.value,t.updateTitle(),await t.applyStyleText(t.renderedPropertyText(),!1),await this.render()}async onPropertyDeselected(e){if(!this.section)return;const t=ensureTreeElementForProperty(this.section,e.data.name);await t.applyStyleText("",!1),await this.render()}bindContext(e,t){this.pane=e,this.section=t,this.editor.addEventListener("property-selected",this.onPropertySelected),this.editor.addEventListener("property-deselected",this.onPropertyDeselected)}unbindContext(){this.pane=void 0,this.section=void 0,this.editor.removeEventListener("property-selected",this.onPropertySelected),this.editor.removeEventListener("property-deselected",this.onPropertyDeselected)}async render(){this.editor.data={authoredProperties:this.section?getAuthoredStyles(this.section):new Map,computedProperties:this.pane?await fetchComputedStyles(this.pane):new Map}}static instance(){return instance||(instance=new FlexboxEditorWidget),instance}static createFlexboxEditorButton(e,t){const n=createButton();return n.onclick=async o=>{o.stopPropagation();const r=e.swatchPopoverHelper(),i=FlexboxEditorWidget.instance();i.bindContext(e,t),await i.render();const s=n.enclosingNodeOrSelfWithClass("style-panes-wrapper"),a=()=>{r.hide(!0)};r.show(i,n,(()=>{i.unbindContext(),s&&s.removeEventListener("scroll",a)})),s&&s.addEventListener("scroll",a)},n}}function createButton(){const e=document.createElement("button");e.classList.add("styles-pane-button"),e.tabIndex=0,e.title=i18nString(UIStrings.editorButton),e.onmouseup=e=>{e.stopPropagation()};const t=new Components.Icon.Icon;return t.data={iconName:"flex-wrap-icon",color:"var(--color-text-secondary)",width:"12px",height:"12px"},e.appendChild(t),e}function ensureTreeElementForProperty(e,t){const n=e.propertiesTreeOutline.rootElement().children().find((e=>e instanceof StylePropertyTreeElement&&e.property.name===t));if(n)return n;const o=e.addNewBlankProperty();return o.property.name=t,o}async function fetchComputedStyles(e){const t=e.computedStyleModel(),n=await t.fetchComputedStyle();return n?n.computedStyle:new Map}function getAuthoredStyles(e){const t=new Map,n=new Set(EditableProperties.map((e=>e.propertyName)));for(const o of e._style.leadingProperties())n.has(o.name)&&t.set(o.name,o.value);return t}