import { unparser } from "./unparser.mjs";
import { parser, runner, openers } from "./parser.mjs";
import objsI from "./objs.mjs";

let data = parser(`
    on(
        [compile]
        {   
            echo(add([2][3]))
            echo([Hello World!])
            echo(add([2][3]))
            echo([Hello World!])
        }
    )
`);

async function runWrap() {
    let objs = Object.assign({}, objsI);
    objs.events = new EventTarget();
    await runner(data, objs);
    let ev = new Event('compile'); // TODO: more events

    objs.events.dispatchEvent(ev);
}

let clickedBlock = false;
let clickedArea = false;
let clickedClone = false;
let bodyThing = document.body;

async function createBlocks(dat, parent = bodyThing) {
    if (dat.canDelete) return false;

    let args = Object.assign([], dat.args);
    if (!args || !args[0]) args = [dat.args];
    if (!args || !args[0]) args = [];
    for (let i in args) {
        args[i] = await createBlocks(args[i])
    }

    let o = dat.op ? dat.op.charCodeAt() : 'nil';

    let div = document.createElement('div');
    div.classList.add(`op-${o}`)
    div.classList.add(`block-${dat.context}`)
    div.classList.add(`block`)
    div.textContent = dat.str || dat.context;
    parent.appendChild(div);

    if (dat.op == '{') {
        //todo: clean
        let button = document.createElement('div');
        button.classList.add(`block`)
        button.classList.add(`block-push`)
        button.textContent = 'push a block';
        div.appendChild(button)

        button.onclick = function(e) {
            dat.args.push(parser(`comment([placeholder])`));
            bodyThing.innerHTML = '';

            createBlocks(data);

            e.stopPropagation();
        }
    }

    for (let i in args) {
        let arg = args[i];
        if (arg) div.appendChild(arg);
    }


    div.onclick = function (e) {
        if (clickedBlock) {
            if (clickedArea != dat) {
                let swap = {};
                console.log(clickedArea, dat)
                Object.assign(swap, clickedArea);
                Object.assign(clickedArea, dat);
                Object.assign(dat, swap);

                bodyThing.innerHTML = '';

                createBlocks(data);

                runWrap();
            }

            clickedClone.remove();
            clickedClone = false;
            clickedBlock = false;
            clickedArea = false;
        } else {
            clickedClone = div.cloneNode(true);
            document.body.appendChild(clickedClone);
            clickedBlock = div;
            clickedArea = dat;
        }
        e.stopPropagation();
    }

    return div;
}

document.onmousemove = function(e) {
    if (!clickedClone) return;

    clickedClone.style.position = 'fixed';
    clickedClone.style.top = `${e.pageY}px`;
    clickedClone.style.left = `${e.pageX}px`;
}

document.onclick = function(e) {
    clickedArea.canDelete = true;

    clickedClone.remove();
    clickedClone = false;
    clickedBlock = false;
    clickedArea = false;

    bodyThing.innerHTML = '';

    createBlocks(data);

    runWrap();
}

runWrap();
createBlocks(data);