const view = new lsp.EditorView({
    extensions: lsp.baseExts,
    parent: document.getElementById("editor")
});
let doc = "xquery version '3.1';\n(:~ comment:)\nmodule namespace pdfbox='ns';\n";
var client;
var extLint;

function $(id) { return document.getElementById(id) };

// Load saved content from localStorage when the page loads
window.addEventListener('load', () => {
    const savedText = localStorage.getItem('code');
    if (savedText) doc = savedText;
    let svr = localStorage.getItem('lsp');
    if (!svr) {
        let x = new URL(window.location.href);
        x.protocol = "ws";
        x.pathname = "ws/lsp"
        svr = x.href;
    }
    $("iServer").value = svr;
    view.setState(lsp.EditorState.create({ doc: doc, extensions: lsp.baseExts }));
    connect();
});

// Save content to localStorage when the page is about to unload
window.addEventListener('beforeunload', () => {
    const doc = view.state.doc.toString();
    localStorage.setItem('code', doc);
    localStorage.setItem('lsp', $("iServer").value);
});

$("connect").onclick = e => { e.preventDefault(); connect() };

$("search").onclick = e => lsp.openSearchPanel(view);

$("fullscreen").onclick = e => $("editor").requestFullscreen();

$("format").onclick = e => console.log("CMDS", lsp.listCommands(view));

$("lint").onclick = async e => {
    console.log("word", view.state.wordAt(1));
    lsp.openLintPanel(view);
};

$("sync").onclick = e => { client.sync(); console.log("XXXsync"); };

$("format").onclick = e => {
    client.sync();
    console.log("FMT", lsp.formatDocument(view));
};

$("load").onchange = e => {
    const url = e.target.value;
    if (url.length == 0) return
    fetch(url)
        .then(response => response.text())
        .then(t => {
            view.dispatch({

                changes: {
                    from: 0,
                    to: view.state.doc.length,
                    insert: t
                }
            })
            client.sync();
            console.log("SYNC");
        });
    $("load").value = "";
};
function connect() {
    const server = $("iServer").value;
    const file = $("iFile").value;
    lsp.simpleWebSocketTransport(server)
        .then(transport => {
            transport.socket.onclose = (event) => connectStatus(false);
            transport.socket.oneror = (event) => $("msg").innerText = "sock error!";
            transport.subscribe(incoming);
            client = new lsp.LSPClient({ extensions: lsp.languageServerExtensions() });
            client.connect(transport);
            $("popConnect").hidePopover();
            connectStatus(true);
            let extLsp = client.plugin(file, "xquery");
            let up = lsp.debouncedChangeListener({
                delay: 750,
                onChange: (content, state) => {
                    console.log('Debounced change detected:');
                    client.sync();
                }
            })

            view.dispatch({
                effects: lsp.StateEffect.appendConfig.of(
                    [lsp.linter(null, { autoPanel: true }), ...extLsp, up,
                        lsp.keymap.of([...lsp.formatKeymap])])
            })
        })
        .catch(r => { connectStatus(false); alert("connection failed: " + server) });

};

function connectStatus(bool) {
    if (bool) {
        $("popcon").classList.remove("btn-danger")
        $("popcon").classList.add("btn-success")
    } else {
        $("popcon").classList.add("btn-danger")
        $("popcon").classList.remove("btn-success")
    }
};

function incoming(msg) {
    const rpc = JSON.parse(msg);
    log(rpc);

};


function log(rpc) {
    console.log("<-", rpc)
    if (rpc.id) return
    const text = rpc.method;
    const li = document.createElement("li");
    const n = $("traffic").childElementCount + " ";
    li.appendChild(document.createTextNode(n + text));
    $("traffic").insertBefore(li, $("traffic").firstChild)
};