import _ from 'lodash'
/* global MathJax */

import App from '../base'

export default App.directive('mathjax', function($compile, $parse) {
  return {
    link(scope, element, attrs) {
      if (!(MathJax && MathJax.Hub)) return

      // Allowing HTML can be unsafe unless using something like
      // `ng-bind-html` because of potential Angular XSS via {{/}}
      if (!$parse(attrs.mathjaxAllowHtml)(scope)) {
        const mathJaxContents = element.html()
        const nonBindableEl = $compile('<span ng-non-bindable></span>')({})
        element.html('').append(nonBindableEl)
        nonBindableEl.html(mathJaxContents)
      }

      if (attrs.delimiter !== 'no-single-dollar') {
        const inlineMathConfig =
          MathJax.Hub.config && MathJax.Hub.config.tex2jax.inlineMath
        const alreadyConfigured = _.find(
          inlineMathConfig,
          c => c[0] === '$' && c[1] === '$'
        )

        if (!alreadyConfigured) {
          MathJax.Hub.Config({
            tex2jax: {
              inlineMath: inlineMathConfig.concat([['$', '$']])
            }
          })
        }
      }

      setTimeout(() => {
        MathJax.Hub.Queue(['Typeset', MathJax.Hub, element.get(0)])
      }, 0)
    }
  }
})