import './app.less';
import bootHtml from './app.html';
import { AppRoot } from './elements/app-root/app-root';
import { OutputFrame } from './elements/output-frame/output-frame';
import { NotificationBubbles } from './elements/notification-bubbles/notification-bubbles';
import { NotificationBubble } from './elements/notification-bubbles/notification-bubble';
import { ResizeHandle } from './elements/resize-handle/resize-handle';
import { CodeEditorContainer } from './elements/code-editor-container/code-editor-container';
import { WindowControl } from './elements/window-control/window-control';
import { WindowControlConnector } from './elements/window-control/window-control connector';
import { JavascriptCodeEditor } from './elements/code-editor/javascript-code-editor';
import { HtmlCodeEditor } from './elements/code-editor/html-code-editor';
import { CssCodeEditor } from './elements/code-editor/css-code-editor';
import { setDynamicFlexListener } from '../shared/set-dynamic-flex-listener';
import { SessionList } from './elements/session-list/session-list';
import { SessionListItem } from './elements/session-list-item/session-list-item';
import { LoadingSpinner } from './elements/loading-spinner/loading-spinner';
import { isSessionPage } from '../shared/page';

window.customElements.define('app-root', AppRoot);
window.customElements.define('code-editor-container', CodeEditorContainer);
window.customElements.define('javascript-code-editor', JavascriptCodeEditor);
window.customElements.define('html-code-editor', HtmlCodeEditor);
window.customElements.define('css-code-editor', CssCodeEditor);
window.customElements.define('output-frame', OutputFrame);
window.customElements.define('notification-bubbles', NotificationBubbles);
window.customElements.define('notification-bubble', NotificationBubble);
window.customElements.define('resize-handle', ResizeHandle);
window.customElements.define('window-control', WindowControl);
window.customElements.define('window-control-connector', WindowControlConnector);
window.customElements.define('session-list', SessionList);
window.customElements.define('session-list-item', SessionListItem);
window.customElements.define('loading-spinner', LoadingSpinner);

document.body.innerHTML += bootHtml;

if (isSessionPage()) {
        var menuEle = document.getElementById("session-menu");
        var containers = <HTMLElement>document.getElementsByClassName("code-editor-containers")[0];
        var outputframe = <HTMLElement>document.getElementsByClassName("output-frame-container")[0];
        var sessionMenuItem = <HTMLElement>document.querySelector("window-control-connector[target='.menu-container']");
        if (menuEle) {
            menuEle.style.display = "block";
            sessionMenuItem.style.display = "inline-block";
            containers.style.display = "none";
            outputframe.style.display = "none";
        }
}

setDynamicFlexListener();