let input = document.querySelector('#input');

let editor = new SimpleMDE({ element: input });

let output = document.querySelector('#output');

let converter = new showdown.Converter();

function render () {
    output.innerHTML = converter.makeHtml(editor.value());
    localStorage.setItem('save', editor.value())
}

editor.codemirror.on("change", render);

editor.value(localStorage.getItem('save'));

let submitButton = document.querySelector('#submit-button');
let answerInput = document.querySelector('#answer-input');
let resultStatus = document.querySelector('#result-status');
let inputOutputLog = document.querySelector('#io-log');

let wrongResultInfo = document.querySelector('#wrong-result-info');

let wrongResultTestInput = document.querySelector('#test-input');
let wrongResultExpectedOutput = document.querySelector('#test-output');
let wrongResultProgramOutput = document.querySelector('#wrong-output');


function errorResultStatus(textContent) {
    resultStatus.style.color = 'white';
    resultStatus.textContent = textContent;
    resultStatus.style.backgroundColor = 'red';
    resultStatus.style.border = '1px solid darkred';

}

submitButton.onclick = async function () {

    wrongResultInfo.style.display = 'none';

    submitButton.disabled = true;
    answerInput.disabled = true;
    resultStatus.style.color = 'black';
    resultStatus.textContent = 'Aguardando servidor...'
    resultStatus.style.backgroundColor = 'rgb(255 238 7 / 37%)';
    resultStatus.style.border = '1px solid #695e0066';

    let form = new FormData(document.querySelector('form'));

    form.append("answer", answerInput.value);

    let reply = await fetch('http://localhost:8001/answer', 
        {
            method: 'POST', 
            mode: 'no-cors', 
            body: form,
        }
    );

    submitButton.disabled = false;
    answerInput.disabled = false;
    
    if (!reply.ok)
        return;

    let replyJson = await reply.json();

    // caso algo de anormal aconteça no servidor
    if (reply.status != 200) {
        errorResultStatus('status code: ' + reply.status);
        return;
    }

    console.log(replyJson);
    switch (replyJson.status) {
        case 'comp-exec':
            errorResultStatus('Erro de compilação ou execução');
            inputOutputLog.textContent = replyJson.message;
            return;
        case 'wrong':
            errorResultStatus('Incorreto');

            wrongResultInfo.style.display = 'block';

            wrongResultTestInput.textContent = replyJson.input;
            wrongResultExpectedOutput.textContent = replyJson.expected;
            wrongResultProgramOutput.textContent = replyJson.output;

            inputOutputLog.textContent = replyJson.message;
            return;
        case 'pass':
            resultStatus.textContent = 'Successo';
            resultStatus.style.color = 'white';
            resultStatus.style.backgroundColor = 'green';
            resultStatus.style.border = '1px solid darkgreen';

            inputOutputLog.textContent = replyJson.output;
            return;
    }


}

hotkeys.filter = function(){
  return true;
}

hotkeys('ctrl+s', (event) => {
    alert('salvo!')
    event.preventDefault();
} );

hotkeys('ctrl+enter', () => {
    submitButton.click();
} );