import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
import { sleep } from '../../helper/Helper.js';
import { NodeType } from '../../item/NodeType.js';
import { PropertyGridPropertyList } from './PropertyGridPropertyList.js';
import { ContentAndIdPropertiesService } from '../../services/propertiesService/services/ContentAndIdPropertiesService.js';
import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
//import { doesContentChangeAffectDesignItems } from '../../services/contentService/IContentChanged.js';
export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
    static style = css `
    :host {
      display: block;
      height: 100%;
      user-select: none;
      -webkit-user-select: none;
      background: var(--medium-grey, #2f3545);
      color: white;
    }
    div.root {
      display: grid;
      grid-template-columns: 11px 11px auto 1fr auto;
      padding: 3px 6px;
      font-family: monospace; 
      align-items: center;
    }
    .desc {
      font-weight: 700;
      font-size: 10px;
      margin-right: 5px;
    }
    input {
      background: var(--medium-grey, #2f3545);
      border: solid 1px gray;
      color: white;
      width: calc(100% - 6px);
    }
    #type {
      color: wheat;
      white-space: nowrap;
      overflow: hidden;
      font-size: 12px;
      height: 20px;
      border: none;
    }
    #pg {
      height: calc(100% - 64px);
    }
    `;
    static template = html `
  <div class="root">
    <span style="grid-column: span 3;" class="desc">Type:</span><input type="text" readonly id="type">
    <button id="config" style="display: none; grid-column: 5; grid-row: span 3; height: calc(100% - 10px); margin-left: 10px;">config</button>
    <div title="id" id="idRect" style="grid-column: 1; width: 7px; height: 7px; border: 1px solid white;"></div>
    <span id="idSpan" style="grid-column: span 2;" class="desc">Id:</span><input type="text" id="id">
    <div title="innerHTML" id="innerRect" style="grid-column: 1; width: 7px; height: 7px; border: 1px solid white;"></div>
    <div title="textContent" id="contentRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
    <span id="contentSpan" class="desc">Content:</span><input type="text" id="content">
  </div>
  <node-projects-web-component-designer-property-grid id="pg"></node-projects-web-component-designer-property-grid>`;
    propertyGrid;
    _type;
    _id;
    _content;
    _selectionChangedHandler;
    _instanceServiceContainer;
    _idRect;
    _contentRect;
    _innerRect;
    _propertiesService;
    _configButton;
    constructor() {
        super();
        this._restoreCachedInititalValues();
        this._type = this._getDomElement('type');
        this._id = this._getDomElement('id');
        this._content = this._getDomElement('content');
        this.propertyGrid = this._getDomElement('pg');
        this._idRect = this._getDomElement('idRect');
        this._contentRect = this._getDomElement('contentRect');
        this._innerRect = this._getDomElement('innerRect');
        this._configButton = this._getDomElement('config');
        this._configButton.onclick = async () => {
            const srv = await this.serviceContainer?.getLastServiceWhereAsync('configUiService', async (x) => await x.hasConfigUi(this._instanceServiceContainer.selectionService.primarySelection));
            const ui = await srv.getConfigUi(this._instanceServiceContainer.selectionService.primarySelection);
            this.serviceContainer.globalContext.showConfigClicked.emit({ designItem: this._instanceServiceContainer.selectionService.primarySelection, configUi: ui });
        };
        this._propertiesService = new ContentAndIdPropertiesService();
        this._idRect.oncontextmenu = (event) => {
            event.preventDefault();
            if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem)
                this._openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.idProperty);
        };
        this._contentRect.oncontextmenu = (event) => {
            event.preventDefault();
            if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem)
                this._openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty);
        };
        this._innerRect.oncontextmenu = (event) => {
            event.preventDefault();
            if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem)
                this._openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.innerHtmlProperty);
        };
        this._id.onkeydown = e => {
            if (e.key == 'Enter')
                this._instanceServiceContainer.selectionService.primarySelection.id = this._id.value;
            else if (e.key == 'Escape') {
                this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
                e.preventDefault();
                e.stopPropagation();
            }
            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
        };
        this._content.onkeydown = e => {
            if (e.key == 'Enter') {
                this._instanceServiceContainer.selectionService.primarySelection.content = this._content.value;
                this._content.title = this._content.value;
            }
            else if (e.key == 'Escape') {
                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
                e.preventDefault();
                e.stopPropagation();
            }
            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._contentRect, this._propertiesService.contentProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
        };
        let pSel;
        this._id.onfocus = e => {
            pSel = this._instanceServiceContainer.selectionService.primarySelection;
        };
        this._id.onblur = e => {
            if (pSel)
                pSel.id = this._id.value;
            pSel = null;
            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
        };
    }
    set serviceContainer(value) {
        this.propertyGrid.serviceContainer = value;
    }
    set instanceServiceContainer(value) {
        const currentContainer = value;
        this._instanceServiceContainer = currentContainer;
        this._selectionChangedHandler?.dispose();
        if (currentContainer) {
            this._selectionChangedHandler = currentContainer.selectionService.onSelectionChanged.on(async (e) => {
                this.propertyGrid.instanceServiceContainer = currentContainer;
                await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
                await this._refreshHeaderForCurrentSelection(currentContainer);
            });
            this._refreshHeaderForCurrentSelection(currentContainer);
        }
        else {
            this._configButton.style.display = 'none';
            this._id.value = '';
            this._content.value = '';
            this._id.disabled = true;
            this._content.disabled = true;
            this._idRect.style.background = '';
            this._contentRect.style.background = '';
            this._innerRect.style.background = '';
            this._type.value = ":host";
        }
        this.propertyGrid.instanceServiceContainer = currentContainer;
    }
    async _refreshHeaderForCurrentSelection(currentContainer) {
        if (!currentContainer?.selectionService?.primarySelection || currentContainer.selectionService.primarySelection?.isRootItem) {
            this._configButton.style.display = 'none';
            this._id.value = '';
            this._content.value = '';
            this._id.disabled = true;
            this._content.disabled = true;
            this._idRect.style.background = '';
            this._contentRect.style.background = '';
            this._innerRect.style.background = '';
            this._type.value = ":host";
            this._type.title = this._type.value;
            return;
        }
        this._id.disabled = false;
        this._content.disabled = false;
        const srv = await this.serviceContainer?.getLastServiceWhereAsync('configUiService', x => x.hasConfigUi(currentContainer.selectionService.primarySelection));
        if (srv) {
            this._configButton.style.display = 'block';
        }
        else {
            this._configButton.style.display = 'none';
        }
        if (currentContainer.selectionService.primarySelection?.nodeType == NodeType.Element) {
            this._type.value = currentContainer.selectionService.primarySelection?.name ?? '';
        }
        else {
            this._type.value = currentContainer.selectionService.primarySelection?.node?.nodeName ?? '';
        }
        this._type.title = this._type.value;
        this._id.value = currentContainer.selectionService.primarySelection?.id ?? '';
        if (currentContainer.selectionService.primarySelection?.element?.nodeType != NodeType.Element) {
            this._content.value = currentContainer.selectionService.primarySelection?.content ?? '';
        }
        else if (currentContainer.selectionService.primarySelection?.element?.children?.length <= 0)
            this._content.value = currentContainer.selectionService.primarySelection?.content ?? '';
        else
            this._content.value = '';
        this._content.title = this._content.value;
        PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, currentContainer.selectionService.selectedElements, this._propertiesService);
        PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._contentRect, this._propertiesService.contentProperty, currentContainer.selectionService.selectedElements, this._propertiesService);
        PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, currentContainer.selectionService.selectedElements, this._propertiesService);
    }
    _openContextMenu(event, designItems, property) {
        let ctxMenuItems;
        if (this.propertyGrid.propertyContextMenuProvider)
            ctxMenuItems = this.propertyGrid.propertyContextMenuProvider(designItems, property);
        if (!ctxMenuItems)
            ctxMenuItems = property.service.getContextMenu(designItems, property);
        ContextMenu.show(ctxMenuItems, event);
    }
}
customElements.define('node-projects-web-component-designer-property-grid-with-header', PropertyGridWithHeader);
//# sourceMappingURL=PropertyGridWithHeader.js.map