import {hyperlineFactory} from './lib/core/hyperline'
import {getColorList} from './lib/utils/colors'

import factories from './lib/plugins'
import defaultConfig from './lib/utils/defaultConfig'

export function mapHyperTermState(state, map) {
  return Object.assign({}, map, {
    colors: state.ui.colors,
    fontFamily: state.ui.fontFamily
  })
}

function mapConfigToPluginProp(config) {
  const { plugins } = config
  return plugins.map((each) => {
    return {
      componentFactory: factories[each.name],
      options: each.options
    }
  })
}

export function decorateHyperTerm(HyperTerm, {React}) {
  const HyperLine = hyperlineFactory(React)

  return class extends React.Component {
    static displayName() {
      return 'HyperTerm'
    }

    static propTypes() {
      return {
        colors: React.PropTypes.oneOfType([
          React.PropTypes.object,
          React.PropTypes.array
        ]),
        fontFamily: React.PropTypes.string,
        style: React.PropTypes.object
      }
    }

    constructor(props, context) {
      super(props, context)

      this.colors = getColorList(this.props.colors)
      this.plugins = mapConfigToPluginProp(defaultConfig)
    }

    render() {
      return <HyperTerm {...this.props} customChildren={(
        <HyperLine
          fontFamily={this.props.fontFamily}
          colors={this.colors}
          plugins={this.plugins}
        />
      )} />
    }
  }
}

@@ -1,16 +1,17 @@
 import %7B
+ 
 hyperlin
@@ -18,16 +18,17 @@
 eFactory
+ 
 %7D from '
@@ -57,16 +57,17 @@
 import %7B
+ 
 getColor
@@ -70,16 +70,17 @@
 olorList
+ 
 %7D from '
@@ -103,54 +103,15 @@
 rs'%0A
-%0A
 import 
-factories from './lib/plugins'%0Aimport 
 defa
@@ -151,16 +151,54 @@
 ltConfig
+'%0Aimport factories from './lib/plugins
 '%0A%0Aexpor
@@ -1073,17 +1073,16 @@
 ontext)%0A
-%0A
       th
@@ -1124,16 +1124,74 @@
 .colors)
+%0A%0A      const config = window.config.getConfig().hyperline
 %0A      t
@@ -1226,16 +1226,34 @@
 ginProp(
+config ? config : 
 defaultC

Read settings from .hyperterm.js