import { EOL } from 'os'
import React from 'react'
import domtoimage from 'dom-to-image'
import CodeMirror from 'react-codemirror'
import Spinner from 'react-spinner'
import WindowControls from '../components/WindowControls'
import { COLORS, DEFAULT_LANGUAGE } from '../lib/constants'

const DEFAULT_SETTINGS = {
  paddingVertical: '50px',
  paddingHorizontal: '50px',
  marginVertical: '45px',
  marginHorizontal: '45px',
  background: '#fed0ec',
  theme: 'dracula',
  language: DEFAULT_LANGUAGE
}

class Carbon extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      loading: true
    }

    this.detectLanguage = this.detectLanguage.bind(this)
  }

  componentDidMount() {
    this.setState({
      loading: false
    })
  }

  detectLanguage () {
    return 'javascript'
  }

  render () {
    const config = Object.assign(DEFAULT_SETTINGS, this.props.config)

    let language
    if (config.language.name === 'Auto') {
      language = this.detectLanguage(this.props.children)
    } else {
      language = config.language.module || 'plaintext'
    }

    const options = {
      lineNumbers: false,
      mode: language,
      theme: config.theme,
      scrollBarStyle: null,
      viewportMargin: Infinity,
      lineWrapping: true
    }

    // create styles
    const containerStyle = {
      background: config.background,
      padding: `${config.paddingVertical} ${config.paddingHorizontal}`
    }

    // set content to spinner if loading, else editor
    let content = (
      <div>
        <Spinner />
        <style jsx>{`
          div {
            height: 352px;
          }
        `}
        </style>
      </div>
    )
    if (this.state.loading === false) {
      content = (
        <div id="container" style={containerStyle}>
          { config.windowControls ? <WindowControls theme={config.windowTheme} /> : null }
          <CodeMirror
            className={`CodeMirror__container window-theme__${config.windowTheme} ${config.dropShadow ? 'dropshadow' : ''}`}
            value={this.props.children}
            options={options}
          />
          <style jsx>{`
            #container :global(.cm-s-dracula .CodeMirror-cursor) {
              border-left: solid 2px #159588;
            }

            #container :global(.CodeMirror__container.dropshadow) {
              box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
              border-radius: 5px;
            }

            #container :global(.CodeMirror__container .CodeMirror) {
              height: auto;
              min-width: 680px;
              padding: 24px 18px;
              border-radius: 5px;
              font-family: Hack, monospace !important;
              font-size: 0.7rem;
            }

            #container :global(.window-theme__sharp > .CodeMirror) {
              border-radius: 0px;
            }

            #container :global(.window-theme__bw > .CodeMirror) {
              border: 2px solid ${COLORS.SECONDARY};
            }

            #container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
              padding-top: 40px;
            }
          `}</style>
        </div>
      )
    }

    return (
      <div id="section">
        { content }
        <style jsx>{`
          #section {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        `}</style>
      </div>
    )
  }
}

export default Carbon

@@ -18,16 +18,53 @@
 om 'os'%0A
+import * as hljs from 'highlight.js'%0A
 import R
@@ -288,16 +288,31 @@
 LANGUAGE
+, LANGUAGE_HASH
  %7D from 
@@ -656,32 +656,71 @@
    loading: true
+,%0A      language: props.config.language
 %0A    %7D%0A%0A    this
@@ -720,30 +720,30 @@
    this.
-detect
+handle
 Language
  = this.
@@ -730,32 +730,38 @@
 ndleLanguage
+Change
  = this.
 detectLangua
@@ -748,28 +748,34 @@
  = this.
-detectLangua
+handleLanguageChan
 ge.bind(
@@ -861,223 +861,463 @@
  %7D)%0A
+%0A
   
-%7D%0A%0A  detectLanguage () %7B%0A    return 'javascript'%0A  %7D%0A%0A  render () %7B%0A    const config = Object.assign(DEFAULT_SETTINGS, this.props.config)%0A%0A    let language%0A    if (config.language.name === 'Auto') %7B
+  this.handleLanguageChange(this.props.children)%0A  %7D%0A%0A  componentWillReceiveProps (newProps) %7B%0A    this.handleLanguageChange(newProps.children, %7B customProps: newProps %7D)%0A  %7D%0A%0A  handleLanguageChange(newCode, config) %7B%0A    const props = (config && config.customProps) %7C%7C this.props%0A%0A    if (props.config.language.name === 'Auto') %7B%0A      // try to set the language%0A      const detectedLanguage = hljs.highlightAuto(newCode).language
 %0A      
+const 
 language
  = t
@@ -1316,30 +1316,47 @@
 uage
- = this.
+Module = LANGUAGE_HASH%5B
 detect
+ed
 Language
 (thi
@@ -1355,173 +1355,387 @@
 uage
-(this.props.children)%0A    %7D else %7B%0A      language = config.language.module %7C%7C 'plaintext'%0A    %7D%0A%0A    const options = %7B%0A      lineNumbers: false,%0A      mode: language
+%5D%0A%0A      if (languageModule) %7B%0A        this.setState(%7B language: languageModule %7D)%0A      %7D%0A    %7D else %7B%0A      this.setState(%7B language: props.config.language %7D)%0A    %7D%0A  %7D%0A%0A  render () %7B%0A    const config = Object.assign(DEFAULT_SETTINGS, this.props.config)%0A%0A    const options = %7B%0A      lineNumbers: false,%0A      mode: this.state.language ? this.state.language.module : 'plaintext'
 ,%0A  
@@ -2594,16 +2594,65 @@
 : ''%7D%60%7D%0A
+            onChange=%7Bthis.handleLanguageChange%7D%0A
         

add auto detection for languages