import*as i18n from"../i18n/i18n.js";import*as UI from"../ui/ui.js";const UIStrings={manageHeaderColumns:"Manage Header Columns",noCustomHeaders:"No custom headers",addCustomHeader:"Add custom header\u2026",headerName:"Header Name"},str_=i18n.i18n.registerUIStrings("network/NetworkManageCustomHeadersView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class NetworkManageCustomHeadersView extends UI.Widget.VBox{constructor(e,t,s,i){super(!0),this.registerRequiredCSS("network/networkManageCustomHeadersView.css",{enableLegacyPatching:!1}),this.contentElement.classList.add("custom-headers-wrapper"),this.contentElement.createChild("div","header").textContent=i18nString(UIStrings.manageHeaderColumns),this._list=new UI.ListWidget.ListWidget(this),this._list.element.classList.add("custom-headers-list"),this._list.registerRequiredCSS("network/networkManageCustomHeadersView.css",{enableLegacyPatching:!1});const a=document.createElement("div");a.classList.add("custom-headers-list-list-empty"),a.textContent=i18nString(UIStrings.noCustomHeaders),this._list.setEmptyPlaceholder(a),this._list.show(this.contentElement),this.contentElement.appendChild(UI.UIUtils.createTextButton(i18nString(UIStrings.addCustomHeader),this._addButtonClicked.bind(this),"add-button")),this._columnConfigs=new Map,e.forEach((e=>this._columnConfigs.set(e.title.toLowerCase(),e))),this._addHeaderColumnCallback=t,this._changeHeaderColumnCallback=s,this._removeHeaderColumnCallback=i,this.contentElement.tabIndex=0}wasShown(){this._headersUpdated()}_headersUpdated(){this._list.clear(),this._columnConfigs.forEach((e=>this._list.appendItem({header:e.title},e.editable)))}_addButtonClicked(){this._list.addNewItem(this._columnConfigs.size,{header:""})}renderItem(e,t){const s=document.createElement("div");s.classList.add("custom-headers-list-item");const i=s.createChild("div","custom-header-name");return i.textContent=e.header,UI.Tooltip.Tooltip.install(i,e.header),s}removeItemRequested(e,t){this._removeHeaderColumnCallback(e.header),this._columnConfigs.delete(e.header.toLowerCase()),this._headersUpdated()}commitEdit(e,t,s){const i=t.control("header").value.trim();let a;a=s?this._addHeaderColumnCallback(i):this._changeHeaderColumnCallback(e.header,i),a&&!s&&this._columnConfigs.delete(e.header.toLowerCase()),a&&this._columnConfigs.set(i.toLowerCase(),{title:i,editable:!0}),this._headersUpdated()}beginEdit(e){const t=this._createEditor();return t.control("header").value=e.header,t}_createEditor(){if(this._editor)return this._editor;const e=new UI.ListWidget.Editor;this._editor=e;const t=e.contentElement();t.createChild("div","custom-headers-edit-row").createChild("div","custom-headers-header").textContent=i18nString(UIStrings.headerName);return t.createChild("div","custom-headers-edit-row").createChild("div","custom-headers-header").appendChild(e.createInput("header","text","x-custom-header",function(t,s,i){let a=!0;const r=e.control("header").value.trim().toLowerCase();this._columnConfigs.has(r)&&t.header!==r&&(a=!1);return{valid:a,errorMessage:void 0}}.bind(this))),e}}