-{div, span, a, i} = React.DOM
+{div, span, a, i, h1} = React.DOM
 
 shuffle = (a) ->
   idx = a.length

  a

window.MaterialsCollectionClass = React.createClass
  getInitialState: ->
    materials: []
    truncated: true

    )

  render: ->
    headerVisible = @props.header && @state.materials.length > 0
    (div {},
      if headerVisible
        (h1 {className: 'collection-header'}, @props.header)
      (SMaterialsList {materials: @getMaterialsList()})
      @renderTruncationToggle()
    )

window.MaterialsCollection = React.createFactory MaterialsCollectionClass

# Supported options: limit, randomize, header
# Keep API backward compatible, so accept either 'limit' option as the last argument or hash.
Portal.renderMaterialsCollection = (collectionId, selectorOrElement, limitOrOptions = Infinity) ->
  props = if typeof limitOrOptions == 'number'
            {limit: limitOrOptions}
          else
            limitOrOptions
  props.collection = collectionId
  ReactDOM.render MaterialsCollection(props), jQuery(selectorOrElement)[0]
