import { BaseElement } from "../../../shared/_base";
import { CodeEditor } from "../code-editor/code-editor";
import { ResizeHandle } from "../resize-handle/resize-handle";
import './code-editor-container.less';

export class CodeEditorContainer extends BaseElement {
    onInit(): void {
        var language = this.getAttribute("language");
        this.classList.add("flex-vert");
        if (language) {
            this.setHeader(language);
            this.createCodeEditor(language, this.getAttribute("dir")?.toLowerCase().indexOf("v") === 0 ? 'vertical' : 'horizontal');
        }
    }

    setHeader(title: string) {
        var div = document.createElement("div");
        div.classList.add("code-editor-header");
        div.classList.add("flex-shrink");
        div.innerText = title;

        this.appendChild(div);
    }

    createCodeEditor(language: string, expandDir: 'vertical' | 'horizontal') {
        var codeEditorContent = document.createElement("div");
        codeEditorContent.classList.add("code-editor-content");
        var codeEditor = <CodeEditor>document.createElement(language + "-code-editor");
        codeEditorContent.appendChild(codeEditor);

        var resizeHandle = <ResizeHandle>document.createElement("resize-handle");
        resizeHandle.setAttribute("dir", expandDir);

        this.appendChild(codeEditorContent);
        this.appendChild(resizeHandle);
    }
}