import './app.less';
import bootHtml from './app.html';
import { watchConsole } from './injects/watch-console';
import { setOnErrorListener } from './injects/on-error';
import { createCss, createHtml, createScript } from '../shared/create-script';
import { messageListener } from '../shared/message-listener';
import { postMessage, postResponseMessage } from '../shared/post-message';
import { RenderCanvas } from './elements/render-canvas/render-canvas';
import { getCenter, getHeight, getRandom, getWidth, rect, box, getRandomColor } from './injects/dom-helpers';


window.customElements.define('render-canvas', RenderCanvas);

document.body.innerHTML += bootHtml;

watchConsole((type, value) => {
    postMessage(parent, type, value);
});
messageListener((type, value, id) => {
    if (type == "javascript") {
        createScript(value);
        postResponseMessage(parent, id, value);
    }
    else if (type == "html") {
        createHtml(value);
    }
    else if (type == "css") {
        createCss(value);
    }
});
setOnErrorListener((type, value) => {
    postMessage(parent, type, value);
});

//@ts-ignore
window.rect = rect;
//@ts-ignore
window.box = box;
//@ts-ignore
window.width = getWidth;
//@ts-ignore
window.height = getHeight;
//@ts-ignore
window.center = getCenter;
//@ts-ignore
window.rand = getRandom;
//@ts-ignore
window.randomColor = getRandomColor;