import React, { Component, PropTypes } from 'react'
import trumbowyg from 'trumbowyg'
import svgIcons from 'trumbowyg/dist/ui/icons.svg'
const trumbowygIconsId = 'trumbowyg-icons'

class Trumbowyg extends Component {
  constructor(props) {
    super(props)
  }

  componentWillMount() {

  }

  componentDidMount() {

    const {
      id,
      buttons,
      semantic,
      resetCss,
      removeformatPasted,
      autogrow,
      data,
      disabled,
      onFocus,
      onBlur,
      onInit,
      onChange,
      onResize,
      onPaste,
      onOpenFullScreen,
      onCloseFullScreen,
      onClose,
      shouldUseSvgIcons,
      shouldInjectSvgIcons,
      svgIconsPath
    } = this.props

    if (shouldInjectSvgIcons && $(`#${trumbowygIconsId}`).length === 0) {
      $('body').prepend(`<div id="${trumbowygIconsId}">${svgIcons}</div>`)
    }

    const trumbowygInstance = $(`#${id}`)
      .trumbowyg({
        btns: buttons,
        semantic: semantic,
        resetCss: resetCss,
        removeformatPasted: removeformatPasted,
        autogrow: autogrow,
        svgPath: shouldUseSvgIcons
          ? shouldInjectSvgIcons ? '' : svgIconsPath
          : false
      })

    if (onFocus) {
      trumbowygInstance.on('tbwfocus', onFocus)
    }

    if (onBlur) {
      trumbowygInstance.on('tbwblur', onBlur)
    }

    if (onInit) {
      trumbowygInstance.on('tbwinit', onInit)
    }

    if (onChange) {
      trumbowygInstance.on('tbwchange', onChange)
    }
   
    if (onResize) {
      trumbowygInstance.on('tbwresize', onResize)
    }

    if (onPaste) {
      trumbowygInstance.on('tbwpaste', onPaste)
    }

    if (onOpenFullScreen) {
      trumbowygInstance.on('tbwopenfullscreen', onOpenFullScreen)
    }

    if (onCloseFullScreen) {
      trumbowygInstance.on('tbwclosefullscreen', onCloseFullScreen)
    }

    if (onClose) {
      trumbowygInstance.on('tbwclose', onClose)
    }

    $(`#${id}`).trumbowyg('html', data)
    $(`#${id}`).trumbowyg(disabled === true ? 'disable' : 'enable')
  }

  componentWillReceiveProps(nextProps) {
  }

  shouldComponentUpdate(nextProps, nextState) {

    return nextProps.data !== this.props.data
      || nextProps.disabled !== this.props.disabled
  }

  componentWillUpdate(nextProps, nextState) {

  }

  componentDidUpdate(prevProps, prevState) {
    $(`#${this.props.id}`).trumbowyg('html', this.props.data)
    $(`#${this.props.id}`).trumbowyg(this.props.disabled === true ? 'disable' : 'enable')
  }

  componentWillUnmount() {
    $(`#${this.props.id}`).trumbowyg('destroy')
  }

  render() {
    return (
      <div id={`${this.props.id}`} placeholder={this.props.placeholder}></div>
    )
  }
}

Trumbowyg.defaultProps = {
  buttons: [
    ['viewHTML'],
    ['formatting'],
    'btnGrp-semantic',
    ['superscript', 'subscript'],
    ['link'],
    ['insertImage'],
    'btnGrp-justify',
    'btnGrp-lists',
    ['horizontalRule'],
    ['removeformat'],
    ['fullscreen']
  ],
  semantic: true,
  resetCss: false,
  removeformatPasted: false,
  autogrow: false,
  disabled: false,

  shouldUseSvgIcons: true,
  shouldInjectSvgIcons: true
}

Trumbowyg.propTypes = {
  id: PropTypes.string.isRequired,
  data: PropTypes.string.isRequired,
  placeholder: PropTypes.string,
  buttons: PropTypes.array,
  semantic: PropTypes.bool,
  resetCss: PropTypes.bool,
  removeformatPasted: PropTypes.bool,
  autogrow: PropTypes.bool,
  disabled: PropTypes.bool,

  //event handlers
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  onInit: PropTypes.func,
  onChange: PropTypes.func,
  onResize: PropTypes.func,
  onPaste: PropTypes.func,
  onOpenFullScreen: PropTypes.func,
  onCloseFullScreen: PropTypes.func,
  onClose: PropTypes.func,

  shouldUseSvgIcons: PropTypes.bool.isRequired,
  svgIconsPath: PropTypes.string,
  shouldInjectSvgIcons: PropTypes.bool.isRequired
}

export default Trumbowyg

@@ -671,24 +671,39 @@
 svgIconsPath
+,%0A      btnsDef
 %0A    %7D = thi
@@ -947,24 +947,50 @@
 s: buttons,%0A
+        btnsDef: btnsDef,%0A
         sema
@@ -1517,19 +1517,16 @@
 )%0A    %7D%0A
-   
 %0A    if 
@@ -3097,16 +3097,30 @@
  false,%0A
+  btnsDef: %7B%7D,
 %0A  shoul
@@ -3478,16 +3478,44 @@
 s.bool,%0A
+  btnsDef: PropTypes.object,
 %0A  //eve

Allow adding btnsDef