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;
    }
    
    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);
});

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

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

$("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");};

$("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]) })
        })
        .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)
};