React = require 'react'
createClass = require 'create-react-class'

RTEButton = React.createFactory(require './rte_button')

{div} = require 'react-dom-factories'

RTEButtonRow = createClass
  
  displayName: 'RTEButtonRow'

  render: ->
    {buttonStyles, editorState, onToggle} = @props
    currentStyle = editorState.getCurrentInlineStyle()
    selection = editorState.getSelection()
    blockType = editorState
      .getCurrentContent()
      .getBlockForKey(selection.getStartKey())
      .getType()    

    rteButtons = []

    for b in buttonStyles
      rteButtons.push RTEButton
        key: b.label
        active: currentStyle.has(b.style) or b.style is blockType
        label: b.label
        onToggle: onToggle
        style: b.style    

    div {
      key: 'button-row'
      className: 'RichEditor-controls'
    }, rteButtons


module.exports = RTEButtonRow