import init, {matzo_run} from '../pkg/matzo_web.js';
import {EditorView, basicSetup} from "codemirror"

window.onload = () => {
  const run = document.getElementById('run');
  const src = document.getElementById('src');
  const output = document.getElementById('output');
  const examples = document.getElementById('examples');
  const seed = document.getElementById('seed');

  let timer = null;

  init()
    .then(() => {

      const updateCode = () => {
        const code = editor.state.doc.toString();
        // update the URL hash
        location.hash = '#' + encodeURIComponent(code);
        // run the code
        updateOutput(code);

        clearTimeout(timer);
        timer = null;
      };

      const updateOutput = (code) => {
        let result = matzo_run(code, BigInt(seed.value));
        output.innerHTML = result;
      };

      const editListener = EditorView.updateListener.of(_ => {
        if (timer !== null) {
          clearTimeout(timer);
          timer = null;
        }
        timer = setTimeout(updateCode, 500);
      });

      const editor = new EditorView({
        extensions: [basicSetup, editListener],
        parent: src,
      });

      if (location.hash) {
        const encoded = location.hash.substring(1);
        editor.dispatch({
          changes: {from: 0, insert: decodeURIComponent(encoded)}
        });
      } else {
        editor.dispatch({
          changes: {from: 0, insert: sources['simple']}
        });
      }

      examples.onchange = () => {
        const stuff = sources[examples.value]
        editor.dispatch({changes: {from: 0, to: editor.state.doc.length, insert: stuff}});
      };

      seed.onchange = () => {
        updateOutput(editor.state.doc.toString());
      }

      run.onclick = () => {
        seed.value = Math.floor(Math.random() * 0xffffffff);
        updateOutput(editor.state.doc.toString());
      }
    });
};