import { PropertyGridPropertyList } from './PropertyGridPropertyList.js';
import { DesignerTabControl } from '../../controls/DesignerTabControl.js';
import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
import { RefreshMode } from '../../services/propertiesService/IPropertiesService.js';
export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
    _serviceContainer;
    _designerTabControl;
    _selectedItems;
    _propertyGridPropertyLists;
    _propertyGridPropertyListsDict;
    _nodeReplacedCb;
    _instanceServiceContainer;
    _selectionChangedHandler;
    _contentChangedHandler;
    propertyGroupHover;
    propertyGroupClick;
    propertyContextMenuProvider;
    static style = css `
    :host {
      display: block;
      height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }
    button:hover {
      box-shadow: inset 0 3px 0 var(--light-grey);
    }
    button:focus {
      box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
    }
    `;
    static properties = {
        serviceContainer: Object,
        instanceServiceContainer: Object,
        selectedItems: Array,
        propertyGroupHover: Function,
        propertyGroupClick: Function,
        propertyContextMenuProvider: Function
    };
    constructor() {
        super();
        this._designerTabControl = new DesignerTabControl();
        this.shadowRoot.appendChild(this._designerTabControl);
        this._restoreCachedInititalValues();
        this.addEventListener('contextmenu', (e) => {
            if (e.composedPath()[0].localName != 'input')
                e.preventDefault();
        });
    }
    set serviceContainer(value) {
        this._serviceContainer = value;
        this._propertyGridPropertyLists = [];
        this._propertyGridPropertyListsDict = {};
    }
    get serviceContainer() {
        return this._serviceContainer;
    }
    set instanceServiceContainer(value) {
        this._instanceServiceContainer = value;
        this._selectionChangedHandler?.dispose();
        this._contentChangedHandler?.dispose();
        if (this._instanceServiceContainer) {
            this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
                this.selectedItems = e.selectedElements;
            });
            this._contentChangedHandler = this._instanceServiceContainer.onContentChanged.on(e => {
                this._changeOccured(null, false);
            });
            this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements;
        }
        else {
            this.selectedItems = [];
        }
    }
    get selectedItems() {
        return this._selectedItems;
    }
    set selectedItems(items) {
        if (this._selectedItems != items) {
            this._selectedItems = items;
            this._selectedItemsSet();
        }
    }
    async _selectedItemsSet() {
        const pgGroups = this._serviceContainer.propertyGroupService.getPropertygroups(this._selectedItems);
        const visibleDict = new Set();
        for (let p of pgGroups) {
            let lst = this._propertyGridPropertyListsDict[p.name];
            if (!lst) {
                lst = new PropertyGridPropertyList(this.serviceContainer);
                lst.title = p.name;
                lst.propertyGroupHover = this.propertyGroupHover;
                lst.propertyGroupClick = this.propertyGroupClick;
                lst.propertyContextMenuProvider = this.propertyContextMenuProvider;
                this._designerTabControl.appendChild(lst);
                this._propertyGridPropertyLists.push(lst);
                this._propertyGridPropertyListsDict[p.name] = lst;
            }
            lst.setPropertiesService(p.propertiesService);
            if (await lst.createElements(this._selectedItems[0]))
                visibleDict.add(p.name);
        }
        let parentEl = this._designerTabControl;
        for (const v of visibleDict) {
            const el = this._propertyGridPropertyListsDict[v];
            const scrollTop = el.scrollTop;
            if (parentEl === this._designerTabControl)
                parentEl.insertAdjacentElement('afterbegin', el);
            else
                parentEl.insertAdjacentElement('afterend', el);
            parentEl = el;
            el.scrollTo(0, scrollTop);
        }
        for (let p of this._propertyGridPropertyLists) {
            if (visibleDict.has(p.title))
                p.style.display = 'block';
            else
                p.style.display = 'none';
        }
        this._designerTabControl.refreshItems();
        if (this._designerTabControl.selectedIndex < 0)
            this._designerTabControl.selectedIndex = 0;
        for (const a of this._propertyGridPropertyLists) {
            if (visibleDict.has(a.title))
                a.designItemsChanged(this._selectedItems);
        }
        if (this._selectedItems) {
            if (this._selectedItems.length == 1) {
                for (const a of this._propertyGridPropertyLists) {
                    if (visibleDict.has(a.title))
                        a.refreshForDesignItems(this._selectedItems);
                }
                this._observePrimarySelectionForChanges();
            }
        }
        else {
            this._nodeReplacedCb?.dispose();
            this._nodeReplacedCb = null;
        }
    }
    _blockDoubleRun = false;
    async _changeOccured(change, forceRecreate = false) {
        if (!this._blockDoubleRun) {
            this._blockDoubleRun = true;
            const selItem = this._selectedItems[0];
            if (selItem) {
                for (const a of this._propertyGridPropertyLists) {
                    if (a.propertiesService?.getRefreshMode(selItem) == RefreshMode.fullOnValueChange) {
                        await a.createElements(selItem);
                        a.designItemsChanged(this._selectedItems);
                    }
                    a.refreshForDesignItems(this._selectedItems);
                }
            }
            this._blockDoubleRun = false;
        }
    }
    _observePrimarySelectionForChanges() {
        this._nodeReplacedCb?.dispose();
        this._nodeReplacedCb = this._selectedItems[0].nodeReplaced.on(() => {
            this._observePrimarySelectionForChanges();
            this._changeOccured(null, true);
        });
    }
}
customElements.define('node-projects-web-component-designer-property-grid', PropertyGrid);
//# sourceMappingURL=PropertyGrid.js.map