import { BaseCustomWebComponentLazyAppend, css, cssFromString, debounce, TypedEvent } from "@node-projects/base-custom-webcomponent";
import { DesignerTabControl } from './controls/DesignerTabControl.js';
import { DesignerView } from './widgets/designerView/designerView.js';
import { SimpleSplitView } from './controls/SimpleSplitView.js';
import { sleep } from "./helper/Helper.js";
import { ExtensionType } from "./widgets/designerView/extensions/ExtensionType.js";
var tabIndex;
(function (tabIndex) {
    tabIndex[tabIndex["designer"] = 0] = "designer";
    tabIndex[tabIndex["code"] = 1] = "code";
    tabIndex[tabIndex["split"] = 2] = "split";
    tabIndex[tabIndex["preview"] = 3] = "preview";
})(tabIndex || (tabIndex = {}));
export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
    designerView;
    codeView;
    demoView;
    additionalData;
    _firstLoad = true;
    _stylesheetChangedEventRegistered;
    _additionalStyle;
    set additionalStyleString(style) {
        this._additionalStyle = style;
        this.designerView.additionalStyles = [cssFromString(style)];
    }
    ;
    get additionalStyleString() {
        return this._additionalStyle;
    }
    ;
    _additionalStyles;
    set additionalStyles(value) {
        this._additionalStyles = value;
        this.designerView.additionalStyles = this._additionalStyles;
    }
    ;
    get additionalStyles() {
        return this._additionalStyles;
    }
    ;
    _additionalStylesheets;
    set additionalStylesheets(stylesheets) {
        this._additionalStylesheets = stylesheets;
        if (this.designerView.instanceServiceContainer.stylesheetService) {
            this.designerView.instanceServiceContainer.stylesheetService.setStylesheets(stylesheets);
            if (!this._stylesheetChangedEventRegistered) {
                this._stylesheetChangedEventRegistered = true;
                this.designerView.instanceServiceContainer.stylesheetService.stylesheetChanged.on(e => this.additionalStylesheetChanged.emit({ name: e.name, newStyle: e.newStyle, oldStyle: e.oldStyle, changeSource: e.changeSource }));
            }
        }
    }
    ;
    get additionalStylesheets() {
        return this._additionalStylesheets;
    }
    ;
    additionalStylesheetChanged = new TypedEvent;
    get readOnly() {
        return this.designerView?.readOnly;
    }
    set readOnly(v) {
        if (this.designerView)
            this.designerView.readOnly = v;
        if (this.codeView)
            this.codeView.readOnly = v;
    }
    onContentChanged = new TypedEvent();
    onTabChanged = new TypedEvent();
    _contentChangeSource = 'designer';
    _serviceContainer;
    _content = '';
    _tabControl;
    _selectionPosition;
    _splitDiv;
    _designerDiv;
    _codeDiv;
    refreshInSplitViewDebounced;
    _disableChangeNotificationDesigner;
    _disableChangeNotificationEditor;
    static get style() {
        return css `
      div {
        height: 100%;
        display: flex;
        flex-direction: column;
      }                            
      node-projects-designer-view {
        height: 100%;
        overflow: hidden;
      }
      `;
    }
    constructor(serviceContainer, content, useIframe = false) {
        super();
        this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200);
        this._serviceContainer = serviceContainer;
        if (content != null)
            this._content = content;
        let div = document.createElement("div");
        this._tabControl = new DesignerTabControl();
        div.appendChild(this._tabControl);
        this.designerView = new DesignerView(useIframe);
        this.designerView.setAttribute('exportparts', 'canvas');
        this.designerView.slot = 'top';
        this._designerDiv = document.createElement("div");
        this._tabControl.appendChild(this._designerDiv);
        this._designerDiv.appendChild(this.designerView);
        this._designerDiv.dataset.title = 'Designer';
        this.designerView.initialize(this._serviceContainer);
        this.designerView.instanceServiceContainer.documentContainer = this;
        this.designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(e => this.designerSelectionChanged(e));
        this.designerView.instanceServiceContainer.onContentChanged.on(() => this.designerContentChanged());
        this.codeView = new serviceContainer.config.codeViewWidget();
        this.codeView.slot = 'bottom';
        this.codeView.style.position = 'relative';
        this._codeDiv = document.createElement("div");
        this._tabControl.appendChild(this._codeDiv);
        this._codeDiv.style.position = 'relative';
        this._codeDiv.appendChild(this.codeView);
        this._codeDiv.dataset.title = 'Code';
        this.codeView.onTextChanged.on(text => {
            if (!this._disableChangeNotificationDesigner) {
                if (this._tabControl.selectedIndex === tabIndex.code || this._tabControl.selectedIndex === tabIndex.split) {
                    this._disableChangeNotificationEditor = true;
                    this._content = text;
                    this.refreshInSplitViewDebounced();
                }
            }
        });
        this._splitDiv = new SimpleSplitView();
        this._splitDiv.style.height = '100%';
        this._splitDiv.dataset.title = 'Split';
        this._tabControl.appendChild(this._splitDiv);
        if (serviceContainer.config.demoViewWidget) {
            this.demoView = new serviceContainer.config.demoViewWidget();
            this.demoView.dataset.title = 'Preview';
            this._tabControl.appendChild(this.demoView);
        }
        queueMicrotask(() => {
            this.shadowRoot.appendChild(div);
            this._tabControl.selectedIndex = tabIndex.designer;
        });
    }
    async refreshInSplitView() {
        try {
            await this.updateDesignerHtml();
        }
        catch (err) {
            console.error(err);
        }
        this._disableChangeNotificationEditor = false;
    }
    get currentView() {
        if (this._tabControl.selectedIndex == tabIndex.designer)
            return 'designer';
        if (this._tabControl.selectedIndex == tabIndex.split)
            return 'split';
        if (this._tabControl.selectedIndex == tabIndex.code)
            return 'code';
        if (this._tabControl.selectedIndex == tabIndex.preview)
            return 'preview';
        return null;
    }
    set currentView(view) {
        if (view == 'designer')
            this._tabControl.selectedIndex = tabIndex.designer;
        if (view == 'split')
            this._tabControl.selectedIndex = tabIndex.split;
        if (view == 'code')
            this._tabControl.selectedIndex = tabIndex.code;
        if (view == 'preview')
            this._tabControl.selectedIndex = tabIndex.preview;
    }
    designerSelectionChanged(e) {
        if (this._tabControl.selectedIndex === tabIndex.split) {
            let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
            if (primarySelection) {
                if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
                    this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
                    if (this._selectionPosition)
                        this.codeView.setSelection(this._selectionPosition);
                    this._selectionPosition = null;
                }
            }
        }
    }
    designerContentChanged() {
        //event wenn text geändert......
        this.onContentChanged.emit({ source: this._contentChangeSource });
        if (!this._disableChangeNotificationEditor) {
            this._disableChangeNotificationDesigner = true;
            if (this._tabControl.selectedIndex === tabIndex.code || this._tabControl.selectedIndex === tabIndex.split) {
                let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
                this._content = this.designerView.getDesignerHTML();
                this.codeView.update(this._content, this.designerView.instanceServiceContainer);
                if (primarySelection) {
                    if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
                        this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
                        if (this._selectionPosition)
                            this.codeView.setSelection(this._selectionPosition);
                        this._selectionPosition = null;
                    }
                }
            }
            this._disableChangeNotificationDesigner = false;
        }
    }
    dispose() {
        if (this.designerView?.instanceServiceContainer?.collaborationService) {
            this.designerView.instanceServiceContainer.collaborationService.disconnect();
            this.designerView.instanceServiceContainer.collaborationService.detachTransport();
        }
        this.codeView.dispose();
        this.demoView.dispose();
    }
    executeCommand(command) {
        if (this._tabControl.selectedIndex === tabIndex.designer || this._tabControl.selectedIndex === tabIndex.split)
            this.designerView.executeCommand(command);
        else if (this._tabControl.selectedIndex === tabIndex.code)
            this.codeView.executeCommand(command);
        else if (this._tabControl.selectedIndex === tabIndex.preview)
            this.demoView.executeCommand(command);
    }
    canExecuteCommand(command) {
        if (this._tabControl.selectedIndex === tabIndex.designer || this._tabControl.selectedIndex === tabIndex.split) {
            if (this.designerView?.canExecuteCommand)
                return this.designerView.canExecuteCommand(command);
        }
        else if (this._tabControl.selectedIndex === tabIndex.code) {
            if (this.codeView?.canExecuteCommand)
                return this.codeView.canExecuteCommand(command);
        }
        else if (this._tabControl.selectedIndex === tabIndex.preview) {
            if (this.demoView?.canExecuteCommand)
                return this.demoView.canExecuteCommand(command);
        }
        return false;
    }
    async setContentAsync(value) {
        this._content = value;
        if (this._tabControl) {
            if (this._tabControl.selectedIndex === tabIndex.designer)
                await this.updateDesignerHtml();
            else if (this._tabControl.selectedIndex === tabIndex.code)
                this.codeView.update(this._content, this.designerView.instanceServiceContainer);
            else if (this._tabControl.selectedIndex === tabIndex.split) {
            }
            else if (this._tabControl.selectedIndex === tabIndex.preview)
                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString);
        }
    }
    set content(value) {
        this.setContentAsync(value);
    }
    get content() {
        if (this._tabControl) {
            if (this._tabControl.selectedIndex === tabIndex.designer)
                this._content = this.designerView.getDesignerHTML();
            else if (this._tabControl.selectedIndex === tabIndex.code)
                this._content = this.codeView.getText();
            return this._content;
        }
        return null;
    }
    ready() {
        this._tabControl.onSelectedTabChanged.on(i => {
            if (i.oldIndex === tabIndex.designer) {
                let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
                this._content = this.designerView.getDesignerHTML();
                if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
                    this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
                }
            }
            else if (i.oldIndex === tabIndex.code) {
                this._content = this.codeView.getText();
            }
            else if (i.oldIndex === tabIndex.split) {
                this._designerDiv.appendChild(this.designerView);
                this._codeDiv.appendChild(this.codeView);
            }
            else if (i.oldIndex === tabIndex.preview) {
                if (this.demoView?.stopDisplay)
                    this.demoView.stopDisplay();
            }
            if (i.newIndex === tabIndex.designer || i.newIndex === tabIndex.split)
                this.updateDesignerHtml();
            if (i.newIndex === tabIndex.code || i.newIndex === tabIndex.split) {
                this.codeView.update(this._content, this.designerView.instanceServiceContainer);
                if (this._selectionPosition) {
                    this.codeView.setSelection(this._selectionPosition);
                    sleep(20).then(x => {
                        if (this._selectionPosition)
                            this.codeView.setSelection(this._selectionPosition);
                        this._selectionPosition = null;
                    });
                }
                if (i.changedViaClick) {
                    this.codeView.focusEditor();
                }
            }
            if (i.newIndex === tabIndex.split) {
                this._splitDiv.appendChild(this.designerView);
                this._splitDiv.appendChild(this.codeView);
            }
            if (i.newIndex === tabIndex.preview) {
                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString);
            }
            if (this._content) {
                this._firstLoad = false;
            }
            this.onTabChanged.emit({ oldTab: tabIndex[i.oldIndex], newTab: tabIndex[i.newIndex] });
        });
        if (this._content) {
            this.content = this._content;
            this._firstLoad = false;
        }
    }
    async updateDesignerHtml() {
        if (this._firstLoad)
            return this.designerView.parseDesignerHTML(this._content, this._firstLoad);
        else {
            const html = this.designerView.getDesignerHTML();
            if (html != this._content) {
                this._contentChangeSource = 'code';
                await this.designerView.parseDesignerHTML(this._content, this._firstLoad);
                this._contentChangeSource = 'designer';
                return;
            }
            else {
                this.instanceServiceContainer.undoService.clearTransactionstackIfNotEmpty();
                this.designerView.designerCanvas.overlayLayer.removeAllOverlays();
                this.designerView.designerCanvas.extensionManager.reapplyAllAppliedExtentions(null, [ExtensionType.Permanent, ExtensionType.Selection, ExtensionType.PrimarySelection, ExtensionType.PrimarySelectionContainer, ExtensionType.OnlyOneItemSelected, ExtensionType.MultipleItemsSelected]);
            }
        }
    }
    get instanceServiceContainer() {
        return this.designerView.instanceServiceContainer;
    }
}
customElements.define("node-projects-document-container", DocumentContainer);
//# sourceMappingURL=documentContainer.js.map