function load(textarea, div) {
    div.innerHTML = '';
    let lines = textarea.value.split('\n');
    for (let i = 0; i < lines.length; i++) {
        let line = lines[i];
        let elem = formatLine(line);
        elem.id = 'mdnotes_' + i;
        div.append(elem);
    }
}

function save(textarea, div) {
    let lines = div.children;
    let text = '';
    for (let i=0; i<lines.length; i++) {
        text += lines[i].innerText + '\n';
    }
    textarea.value = text;
}

function onlinkin(e) {
    let link = e.currentTarget;
    if (document.getElementById('mdnotes') !== document.activeElement) {
        document.getElementById('mdnotes').contentEditable = false;
    }
}

function onlink(e) {
    let mdnotes = document.getElementById('mdnotes');
    if (mdnotes.contentEditable == 'false') {
        e.preventDefault();
        mdnotes.contentEditable = true;
        let link = e.currentTarget;
        if (link.host !== document.location.host) {
            open(link.href);
        } else {
            open(link.href, '_self');
        }
        return false;
    } else {
        return true;
    }
}

function onlinkout(e) {
    let mdnotes = document.getElementById('mdnotes');
    if (mdnotes.contentEditable == 'false') {
        mdnotes.contentEditable = true;
    }    
}

function formatLine(line) {
    let normLine = line.trimStart();
    let token = null;
    let elem = document.createElement('div');
    if (normLine.match(/^####\s/i)) {
        token = /^(####\s)/i;
        elem.classList.add('h4');
    } else if (normLine.match(/^###\s/i)) {
        token = /^(###\s)/i;
        elem.classList.add('h3');
    } else if (normLine.match(/^##\s/)) {
        token = /^(##\s)/i;
        elem.classList.add('h2');
    } else if (normLine.match(/^#\s/i)) {
        token = /^(#\s)/i;
        elem.classList.add('h1');
    } else if (normLine.match(/^>\s*>\s*>\s/i)) {
        token = /^(>\s*>\s*>\s)/i;
        elem.classList.add('bq3');
        elem.classList.add('bq');
    } else if (normLine.match(/^>\s*>\s/i)) {
        token = /^(>\s*>\s)/i;
        elem.classList.add('bq2');
        elem.classList.add('bq');
    } else if (normLine.match(/^>\s/i)) {
        token = /^(>\s)/i;
        elem.classList.add('bq1');
        elem.classList.add('bq');
    } else {
        elem.classList.add('body');
    }
    if (elem.classList.contains('bq') || elem.classList.contains('body')) {
        if (normLine.match(/^((>\s*){0,3}\s)?([\*\-+]\s*){3}\s/i)) {
            token = /^((>\s*){0,3}([\*\-+]\s*){2})/i;
            elem.classList.add('ul3');
            elem.classList.remove('body');
        } else if (normLine.match(/^((>\s*){0,3}\s)?([\*\-+]\s*){2}\s/i)) {
            token = /^((>\s*){0,3}[\*\-+]\s*)/i;
            elem.classList.add('ul2');
            elem.classList.remove('body');
        } else if (normLine.match(/^((>\s*){0,3}\s)?[\*\-+]\s/i)) {
            token = /^((>\s*){1,3})/;
            if (token == '') {
                token = null;
            }
            elem.classList.add('ul1');
            elem.classList.remove('body');
        } else if (normLine.match(/^((>\s*){0,3}\s)?([0-9]+\.){3}\s/i)) {
            token = /^((>\s*){1,3})/;
            if (token == '') {
                token = null;
            }
            elem.classList.add('ul3');
            elem.classList.remove('body');
        } else if (normLine.match(/^((>\s*){0,3}\s)?([0-9]+\.){2}\s/i)) {
            token = /^((>\s*){1,3})/;
            if (token == '') {
                token = null;
            }
            elem.classList.add('ul2');
            elem.classList.remove('body');
        } else if (normLine.match(/^((>\s*){0,3}\s)?[0-9]+\.\s/i)) {
            token = /^((>\s*){1,3})/;
            if (token == '') {
                token = null;
            }
            elem.classList.add('ul1');
            elem.classList.remove('body');
        }
    }
    elem.classList.add('mdnotes_line');
    normLine = addLink(normLine);
    normLine = addBold(normLine);
    normLine = addMono(normLine);
    if (token != null) {
        normLine = normLine.replace(token, '<span class="token">$1</span>');
    }
    elem.innerHTML = normLine;
    let links = elem.getElementsByClassName('link');
    for (let i=0; i<links.length; i++) {
        let link = links[i];
        link.addEventListener('mouseover', onlinkin);
        link.addEventListener('click', onlink);
        link.addEventListener('mouseout', onlinkout);
    }
    return elem;
}

function addMono(line) {
    line = line.replace(/`(.*?)`/ig, '<span class="mono"><span class="token">`</span>$1<span class="token">`</span></span>');
    return line;
}

function addLink(line) {
    line = line.replace(/(\[(.*?)\]\((.*?)\))/ig, '<span class="token">[</span><a class="link" href="$3">$2</a><span class="token">]($3)</span>');
    return line;
}

function addBold(line) {
    line = line.replace(/\*\*([^\s].*?)\*\*/ig, '<span class="bold"><span class="token">**</span>$1<span class="token">**</span></span>');
    line = line.replace(/__([^\s].*?)__/ig, '<span class="bold"><span class="token">__</span>$1<span class="token">__</span></span>');
    return line;
}

export { load, save, formatLine };