var React = require('react')
require('./index.less')

var hljs = require('./highlight.js');

var MAP = {
  'py': 'python',
  'js': 'javascript',
  'javascript': 'javascript',
  'json': 'javascript',
  'rb': 'ruby',
  'csharp': 'cs',
};

function normalize(lang) {
  if(!lang) { return null; }

  var lower = lang.toLowerCase();
  return MAP[lower] || lower;
}

function highlight(lang, code) {
  if(!lang) return code;

  // Normalize lang
  lang = normalize(lang);
  if( !lang) return code

  try {
    return hljs.highlight(lang, code).value;
  } catch(e) { }

  return code;
}

module.exports =  React.createClass({
  render : function(){
    //{highlighter.highlightSync(this.props.children)}
    var content = normalize(this.props.type) ?
      <div className='code-content' contentEditable={true} dangerouslySetInnerHTML={{__html:highlight(this.props.type,this.props.children) }} /> :
      <div className='code-content' contentEditable={true}>{this.props.children}</div>


    return <pre className={`code code-type-${this.props.type||'unknown'}`}>
      <div className='code-type'>{this.props.type||'code'}</div>
      {content}
    </pre>
  }
})