import init, { make_vm } from './wasm/automathon.js';

// simulation speed
const TICKS_PER_SECOND = 12;
const MS_PER_TICK = 1_000 / TICKS_PER_SECOND;

// one per page
const CANVAS_SELECTOR = '#arena canvas';
const TICK_BUTTON_SELECTOR = '#tick';
const BENCH_BUTTON_SELECTOR = '#bench';
const BLINKEN_BUTTON_SELECTOR = '#blinken';

// one per bot
const SRC_SELECT_SELECTOR = '#src-select';
const COMPILE_BUTTON_SELECTOR = '#compile';
const WORDLIST_SELECTOR = '#wordlist';
const STACK_SELECTOR = '#stack';
const CALLSTACK_SELECTOR = '#callstack';
const VARS_SELECTOR = '#vars';
const SRC_SELECTOR = '#src';
const IP_SELECTOR = '#wordlist .ip';

function selectorForIP(word, offset) {
    return `#wordlist x-bytecode[x-index='${word}'] x-op[x-index='${offset}']`;
}

function wordlistElts(wordlist) {
    return wordlist.map((bc, i) => {
        const bcElt = document.createElement('x-bytecode');
        bcElt.setAttribute('x-index', i);
        for (let i = 0; i < bc.len(); i++) {
            const opElt = document.createElement('x-op');
            opElt.setAttribute('x-index', i);
            opElt.textContent = bc.at(i);
            bcElt.appendChild(opElt);
        }
        return bcElt;
    })
}

function initWordlist() {
    const sel = selectorForIP(0, 0);
    document.querySelectorAll(sel).forEach(e => {
        e.classList.add('ip')
    });
}

function renderStack(vm) {
    document.querySelectorAll(STACK_SELECTOR).forEach(e => {
        while (e.lastChild) {
            e.removeChild(e.lastChild);
        }
        vm.stack().reverse()
            .forEach(datum => {
                const elt = document.createElement('li');
                elt.textContent = datum;
                e.appendChild(elt);
                return elt;
            });
    });
}

function renderCallStack(vm) {
    document.querySelectorAll(CALLSTACK_SELECTOR).forEach(e => {
        while (e.lastChild) {
            e.removeChild(e.lastChild);
        }
        vm.callstack().reverse()
            .forEach(datum => {
                const elt = document.createElement('li');
                elt.textContent = `${datum.word}@${datum.offset}`;
                e.appendChild(elt);
                return elt;
            });
    });
}

function renderVars(vm) {
    document.querySelectorAll(VARS_SELECTOR).forEach(e => {
        while (e.lastChild) {
            e.removeChild(e.lastChild);
        }

        ['out', 'heading', 'speed', 'doppler'].forEach(name => {
            const dt = document.createElement('dt');
            dt.textContent = name;
            e.appendChild(dt);

            const dd = document.createElement('dd');
            dd.textContent = vm[name]();
            e.appendChild(dd);
        });
    });
}

function renderRobo(ctx, x, y) {
    ctx.fillStyle = 'rgb(200 0 0)';
    ctx.beginPath();
    ctx.arc(x, y, 25, 0, 2 * Math.PI);
    ctx.fill();
}

function renderArena(robos, delta=0.0) {
    // interpolation factor for smoother movement independent of tick
    // rate, but never tween more than 1 tick.
    const timeScale = Math.min(delta / MS_PER_TICK, 1.0);
    const canvas = document.querySelector(CANVAS_SELECTOR);
    const ctx = canvas.getContext('2d');

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    robos.forEach(robo => {
        let heading = robo.vm.heading();
        let speed = robo.vm.speed();
        let [velx, vely] = [
            Math.cos(2 * Math.PI * heading / 360),
            Math.sin(2 * Math.PI * heading / 360)
        ].map(x => timeScale * speed * x);

        renderRobo(ctx, robo.x, robo.y);
        robo.x += velx;
        robo.y += vely;
    });
}

const highRange = new Range();
const highlight = new Highlight(highRange);
CSS.highlights.set('exec', highlight);

function renderTextHighlight(vm) {
    const ip = vm.ip();
    const anno = vm.annotation_at(ip)
    const src = document.querySelector(SRC_SELECTOR);

    // this assumes the text node is the first child, maybe it isn't?
    highRange.setStart(src.childNodes[0], anno.start);
    highRange.setEnd(src.childNodes[0], anno.end);
}

function tick(robo) {
    if (!robo.vm.tick()) {
        robo.vm.reset_ip();
    }

    const { word, offset } = robo.vm.ip();
    document.querySelectorAll(IP_SELECTOR).forEach(e => e.classList.remove('ip'));
    const sel = selectorForIP(word, offset);
    document.querySelectorAll(sel).forEach(e => {
        e.classList.add('ip');
    });
    renderStack(robo.vm);
    renderCallStack(robo.vm);
    renderVars(robo.vm);
    renderTextHighlight(robo.vm);
}

function loadForth(taintedPath) {
    // ascii only + ‘-’, ‘_’, ‘.’, and ‘/’, but no ‘../’
    const path =
        taintedPath
            .replace(/[^-_A-Za-z./]/g, '')
            .replace(/\.\.\//g, '');
    fetch(`./samples/${path}`)
        .then(resp => {
            if (!resp.ok) {
                throw `http status ${resp.status}`
            }
            return resp.text()
        })
        .then(text => {
            document.querySelector(SRC_SELECTOR).textContent = text;
        })
        .catch(e => {
            console.error(`couldn't fetch ‘${path}’`, e);
        });
}

async function loaded() {
    console.debug('running init');
    const mod = await init();
    console.debug('init done', mod);
    const robo = {
        x: 125,
        y: 25,
        vm: make_vm()
    };

    document.querySelectorAll(SRC_SELECT_SELECTOR).forEach(async sel => {
        sel.onchange = _ => loadForth(sel.value);
        loadForth(sel.value);
    });

    document.querySelector(COMPILE_BUTTON_SELECTOR).onclick = e => {
        console.debug('compile clicked', e);

        let wordlistContainer = document.querySelector(WORDLIST_SELECTOR);
        while (wordlistContainer.lastChild) {
            console.debug('removing child', wordlistContainer.lastChild)
            wordlistContainer.removeChild(wordlistContainer.lastChild);
        }

        // always add a newline until i decide what to do with the parser.
        const text = document.querySelector(SRC_SELECTOR).textContent + '\n';
        console.debug('compiling', text);
        const start = performance.now();
        const res = robo.vm.compile(text);
        const end = performance.now();
        console.info(`compile took ${end-start} ms`);
        if (res) {
            const wordlist = wordlistElts(robo.vm.wordlist());
            wordlist.forEach(elt => wordlistContainer.appendChild(elt));
            initWordlist();
            renderStack(robo.vm);
            renderCallStack(robo.vm);
            renderVars(robo.vm);
            renderTextHighlight(robo.vm);
            renderArena([robo]);
        }
    };

    document.querySelector(BENCH_BUTTON_SELECTOR).onclick = e => {
        console.debug('bench clicked', e);
        const start = performance.now();
        let tickCount = 0;
        for (let i = 0; i < 1_000_000; i++) {
            tickCount += robo.vm.run();
        }
        const end = performance.now();
        console.info(`run took ${end-start} ms for ${tickCount} ticks (${(end-start)/tickCount * 1_000_000} ns/tick).`);
        console.info('result', robo.vm.stack());
    };

    document.querySelector(TICK_BUTTON_SELECTOR).onclick = e => {
        console.debug('tick clicked', e);
        tick(robo);
        renderArena([robo], MS_PER_TICK);
    };

    let blinkenRun = false;
    document.querySelector(BLINKEN_BUTTON_SELECTOR).onclick = e => {
        console.debug('blinken clicked', e);

        let lastTime;
        function r(t, manual=false) {
            if (blinkenRun && !manual) {
                window.requestAnimationFrame(r);
            }
            const delta = (lastTime === undefined) ? 0 : t - lastTime;
            lastTime = t;
            if (delta > 0) {
                renderArena([robo], delta);
            }
        }

        blinkenRun = !blinkenRun;
        if (blinkenRun) {
            e.target.textContent = 'haltenblinken';
            r(document.timeline.currentTime);
        } else {
            e.target.textContent = 'blinken';
        }
        const onTimeout = _ => {
            if (blinkenRun) {
                setTimeout(onTimeout, MS_PER_TICK);
            }
            tick(robo);
            r(document.timeline.currentTime, true);
        }
        setTimeout(onTimeout);
    }
    window.robo = robo;
}

document.addEventListener('DOMContentLoaded', loaded);