import markdownit from 'markdown-it'
import emoji from 'markdown-it-emoji'
import math from '@rokt33r/markdown-it-math'
import hljs from 'highlight.js'

const katex = window.katex

function createGutter (str) {
  let lc = (str.match(/\n/g) || []).length
  let lines = []
  for (let i = 1; i <= lc; i++) {
    lines.push('<span>' + i + '</span>')
  }
  return '<span class="lineNumber">' + lines.join('') + '</span>'
}

var md = markdownit({
  typographer: true,
  linkify: true,
  html: true,
  xhtmlOut: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs">' +
        createGutter(str) +
        '<code>' +
        hljs.highlight(lang, str).value +
        '</code></pre>'
      } catch (e) {}
    }
    return '<pre class="hljs">' +
    createGutter(str) +
    '<code>' +
    str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;') +
    '</code></pre>'
  }
})
md.use(emoji, {
  shortcuts: {}
})
md.use(math, {
  inlineRenderer: function (str) {
    let output = ''
    try {
      output = katex.renderToString(str.trim())
    } catch (err) {
      output = `<span class="katex-error">${err.message}</span>`
    }
    return output
  },
  blockRenderer: function (str) {
    let output = ''
    try {
      output = katex.renderToString(str.trim(), {displayMode: true})
    } catch (err) {
      output = `<div class="katex-error">${err.message}</div>`
    }
    return output
  }
})
md.use(require('markdown-it-footnote'))

window.md = md

export default function markdown (content) {
  if (content == null) content = ''
  content = content.toString()
    .split('\n')
    .map((line, index) => {
      if (line.trim().length === 0) return ''
      return line + '<a class=\'lineAnchor\' data-key=\'' + (index + 1) + '\'></a>'
    })
    .join('\n')
  return md.render(content)
}