function load(textarea, div) {
    div.innerHTML = '';
    let lines = textarea.value.split('\n');
    for (let i = 0; i < lines.length; i++) {
        let line = lines[i];
        line = line.replace(/\t/, emsp());
        let elem = formatLine(line);
        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.replace(emsp(), '\t') + '\n';
    }
    textarea.value = text;
}

function emsp() {
    return ' ';
}

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 token = null;
    let elem = document.createElement('div');
    line = line.replace('&', '&amp;');
    line = line.replace('<', '&lt;');
    if (line.match(/^\s*####\s/i)) {
        token = /^(\s*####\s)/i;
        elem.classList.add('h4');
    } else if (line.match(/^\s*###\s/i)) {
        token = /^(\s*###\s)/i;
        elem.classList.add('h3');
    } else if (line.match(/^\s*##\s/)) {
        token = /^(\s*##\s)/i;
        elem.classList.add('h2');
    } else if (line.match(/^\s*#\s/i)) {
        token = /^(\s*#\s)/i;
        elem.classList.add('h1');
    } else if (line.match(/^\s*>\s*>\s*>\s/i)) {
        token = /^(\s*>\s*>\s*>\s)/i;
        elem.classList.add('bq3');
        elem.classList.add('bq');
    } else if (line.match(/^\s*>\s*>\s/i)) {
        token = /^(\s*>\s*>\s)/i;
        elem.classList.add('bq2');
        elem.classList.add('bq');
    } else if (line.match(/^\s*>\s/i)) {
        token = /^(\s*>\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 (line.match(/^\s*((>\s*){0,3}\s)?([\*\-+]\s*){3}\s/i)) {
            token = /^(\s*(>\s*){0,3}([\*\-+]\s*){2})/i;
            elem.classList.add('ul3');
            elem.classList.remove('body');
        } else if (line.match(/^\s*((>\s*){0,3}\s)?([\*\-+]\s*){2}\s/i)) {
            token = /^(\s*(>\s*){0,3}[\*\-+])/i;
            elem.classList.add('ul2');
            elem.classList.remove('body');
        } else if (line.match(/^\s*((>\s*){0,3}\s)?[\*\-+]\s/i)) {
            token = /^(\s*(>\s*){0,3}\s*)/;
            elem.classList.add('ul1');
            elem.classList.remove('body');
        } else if (line.match(/^\s*((>\s*){0,3}\s)?([0-9]+\.){3}\s/i)) {
            token = /^(\s*(>\s*){0,3}\s*)/;
            elem.classList.add('ol3');
            elem.classList.remove('body');
        } else if (line.match(/^\s*((>\s*){0,3}\s)?([0-9]+\.){2}\s/i)) {
            token = /^(\s*(>\s*){0,3}\s*)/;
            elem.classList.add('ol2');
            elem.classList.remove('body');
        } else if (line.match(/^\s*((>\s*){0,3}\s)?[0-9]+\.\s/i)) {
            token = /^(\s*(>\s*){0,3}\s*)/;
            elem.classList.add('ol1');
            elem.classList.remove('body');
        }
    }
    elem.classList.add('mdnotes_line');
    line = addLink(line);
    line = addBold(line);
    line = addItalic(line);
    line = addMono(line);
    if (token != null) {
        line = line.replace(token, '<span class="token">$1</span>');
    }
    elem.innerHTML = line;
    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;
}

function addItalic(line) {
    line = line.replace(/(^|[^\*])\*([^\*\s].*?[^\*\s]|[^\*\s])\*([^\*]|$)/ig, '$1<span class="italic"><span class="token">*</span>$2<span class="token">*</span></span>$3');
    line = line.replace(/(^|[^_])_([^_\s].*?[^_\s]|[^_\s])_([^_]|$)/ig, '$1<span class="italic"><span class="token">_</span>$2<span class="token">_</span></span>$3');
    return line;
}

export { load, save, formatLine };