import { BaseElement } from '../../../shared/_base';
import { CodeEditorContainer } from '../code-editor-container/code-editor-container';
import './session-list-item.less';
import * as sessionApi from '../../../shared/session-api';

export class SessionListItem extends BaseElement {
    onInit(): void {
        if (this.hasAttribute("sessionId")) {
            var sessionIdEle = document.createElement("div");
            sessionIdEle.classList.add("session-list-item-session-id");
            sessionIdEle.innerHTML = this.getAttribute("sessionId")?.toString() ?? "";
            this.appendChild(sessionIdEle);
        }

        if (this.hasAttribute("numberOfChanges")) {
            var numberOfChangesEle = document.createElement("div");
            numberOfChangesEle.classList.add("session-list-item-number-of-changes");
            numberOfChangesEle.innerHTML = this.getAttribute("numberOfChanges")?.toString() ?? "";
            this.appendChild(numberOfChangesEle);
        }

        this.addEventListener("click", (evt) => {
            this.itemClicked();
        });
    }

    private intervalHandle: number | null = null;
    stopUpdate() {
        this.classList.remove("selected");

        if (this.intervalHandle) {
            window.clearInterval(this.intervalHandle);
            this.intervalHandle = null;
        }
    }

    startUpdate() {
        this.stopUpdate();

        this.classList.add("selected");

        this.intervalHandle = window.setInterval(this.updateInputs.bind(this), 1000);
    }

    updateInputs() {
        var codeEditorHTMLContainer = <CodeEditorContainer>document.querySelector("code-editor-container[language='HTML']");
        var codeEditorCSSContainer = <CodeEditorContainer>document.querySelector("code-editor-container[language='CSS']");
        var codeEditorJavascriptContainer = <CodeEditorContainer>document.querySelector("code-editor-container[language='Javascript']");
    
        this.getSessionData((js, html, css) => {
            codeEditorJavascriptContainer.setInput(js?.data ?? "");
            codeEditorHTMLContainer.setInput(html?.data ?? "");
            codeEditorCSSContainer.setInput(css?.data ?? "");
        });

    }

    getSessionData(onGet: (javascript: any, html: any, css: any) => void) {
        var lastJavascript: any | null = null;
        var lastHtml: any | null = null;
        var lastCSS: any | null = null;

        sessionApi.getSessionData(this.getAttribute("sessionId")?.toString()?? "", (data) => {
            for (var i = data.length - 1; i >= 0; i--) {
                var dataPoint = data[i];
                 if (!lastJavascript && dataPoint.type == 0) {
                    lastJavascript = dataPoint;
                 }
                 else if (!lastHtml && dataPoint.type == 1) {
                    lastHtml = dataPoint;
                 }
                 else if (!lastCSS && dataPoint.type == 2) {
                    lastCSS = dataPoint;
                 }
            }

            onGet(lastJavascript, lastHtml, lastCSS);
        });
    }

    itemClicked() {
        if (!this.intervalHandle) {
            var containers = <HTMLElement>document.getElementsByClassName("code-editor-containers")[0];
            var outputframe = <HTMLElement>document.getElementsByClassName("output-frame-container")[0];

            containers.style.display = "block";
            outputframe.style.display = "block";

            var children = this.parentElement?.children;

            if (children) {
                for (let i = 0; i < children.length; i++) {
                    const child = <SessionListItem>children[i];
                    if (child != this) {
                        child.stopUpdate();
                    }
                    else {
                        child.startUpdate();
                    }
                }
            }
        }
        else {
            console.log("WOULD STOP!");
            this.stopUpdate();
        }
    }
}