const hljs = require('highlight.js/lib/highlight.js');
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml.js'));
hljs.registerLanguage('css', require('highlight.js/lib/languages/css.js'));
hljs.registerLanguage('cmake', require('highlight.js/lib/languages/cmake.js'));
hljs.registerLanguage('dockerfile', require('highlight.js/lib/languages/dockerfile.js'));
hljs.registerLanguage('Dockerfile', require('highlight.js/lib/languages/dockerfile.js'));
hljs.registerLanguage('less', require('highlight.js/lib/languages/less.js'));
hljs.registerLanguage('scss', require('highlight.js/lib/languages/scss.js'));
hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml.js'));
hljs.registerLanguage('powershell', require('highlight.js/lib/languages/powershell.js'));
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript.js'));
hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript.js'));
hljs.registerLanguage('json', require('highlight.js/lib/languages/json.js'));
hljs.registerLanguage('bash', require('highlight.js/lib/languages/shell.js'));
hljs.registerLanguage('php', require('highlight.js/lib/languages/php.js'));
hljs.registerLanguage('shell', require('highlight.js/lib/languages/shell.js'));
hljs.registerLanguage('cmd', require('highlight.js/lib/languages/shell.js'));
hljs.registerLanguage('typescript', require('highlight.js/lib/languages/typescript.js'));
hljs.registerLanguage('ts', require('highlight.js/lib/languages/typescript.js'));

const markdownRenderer = new marked.Renderer();
global.gitlist.markdownRenderer = markdownRenderer;

const kebabCase = require('lodash/kebabCase')
markdownRenderer.heading = function (text, level, raw) {
    level = level + 2;
    const ref = kebabCase(text).replace(/[^\x00-\xFF]/g, "");
    const id = ref + '-parent';
    const hover = ` onmouseenter="document.getElementById('${ref}').style.display = 'inline'"  onmouseleave="document.getElementById('${ref}').style.display = 'none'" `;

    const element = `<div ${hover} class="p3x-gitlist-markdown-heading-container"><h${level} id="${id}" class="p3x-gitlist-markdown-heading">${text}&nbsp;<a class="p3x-gitlist-markdown-heading-link" id="${ref}" href="${location.origin}${location.pathname}#${ref}" onclick="return window.gitlist.scrollHash(this, event)">#</a></h${level}></div>`;

    return element
}


markdownRenderer.link = function(href, title, text) {
    let a;
    if (href.startsWith('https:/') || href.startsWith('http:/')) {
        a = '<a target="_blank" href="' + href + '">' + text + '</a>';
    } else {
        const start = gitlist.basepath + '/' + gitlist.repo + '/blob/' +  gitlist.branch + '/';
        if (!location.pathname.startsWith(start)) {
            href = start + href;
        } else {
            const url = new URL(location);
            let path = url.pathname.split('/');
            path.pop();
            path = path.join('/');
            href = path + '/' + href;
        }
        a = '<a href="' + href + '">' + text + '</a>';
    }
    return a;
}

markdownRenderer.image = function(href, title, text) {
    title = title || '';
    text = text || '';
    let resultText = title;
    if (text !== '') {
        if (title !== '') {
            resultText += ' - ';
        }
        resultText += text;
    }
    const result = '<a target="_blank" href="' + href + '"><img class="p3x-gitlist-markdown-image" alt="' + htmlEncode(resultText) + '" title="' + htmlEncode(resultText) + '" src="' + href + '"/></a>';

    return result;
};

markdownRenderer.code = (code, language ) => {
    if (language === undefined) {
        language = 'text';
    }

    language = language.toLowerCase()

    if ((hljs.getLanguage(language) === 'undefined' ||  hljs.getLanguage(language) === undefined) && language !== 'text') {
        console.error(`Please add highlight.js as a language (could be a marked error as well, sometimes it thinks a language): ${language}                
We are not loading everything, since it is about 500kb`)
    }
    language = language === 'text' || language === undefined ? 'html' : language;
    const validLang = !!(language && hljs.getLanguage(language));
    const highlighted = validLang ? hljs.highlight(language, code).value : code;
    return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`;
};

markdownRenderer.codespan = (code) => {
    const lang = 'html';
    const highlighted = hljs.highlight(lang, code).value ;
    return `<code style="display: inline; line-height: 34px;" class="hljs ${lang}">${highlighted}</code>`;
}
window.gitlist.markdownRenderer = markdownRenderer;
$(function() {


    const mdContent = $('#p3x-gitlist-readme');
    if (mdContent.length) {
        const twemojiSettings = require('./settings').twemoji;
        const html = marked(mdContent.text(), {
            renderer: markdownRenderer
        });
        mdContent.html(twemoji.parse(html, twemojiSettings));
    }

});