 React = require 'react'
 
-module.exports = React.createClass
+ClassificationsRibbon = React.createClass
+  displayName: 'ClassificationsRibbon'
+
   getDefaultProps: ->
     projects: for i in [0...20]
       {project: "Project #{i}", classifications: Math.floor Math.random() * 100}

          othersWidth =
          <rect fill="gray" fillOpacity="0.5" stroke="none" x={lastX} y="0" width="1" height="1">
            <title>
              {("#{project}: #{classifications}" for {project, classifications} in others).join '\n'}
            </title>
          </rect>}
      </svg>


  render: ->
    if @props.projects.length is 0
      <span className="user-classifications-ribbon-empty" style={
        background: 'rgba(128, 128, 128, 0.2)'
        color: 'gray'
        display: 'inline-block'
        width: @props.width
        height: @props.height
      }>
        No classifications yet
      </span>

    else
      totalClassifications = 0
      for {classifications} in @props.projects
        totalClassifications += classifications ? 1

      others = []

      lastX = 0
      <svg className="user-classifications-ribbon" width={@props.width} height={@props.height} viewBox="0 0 1 1" preserveAspectRatio="none">
        {for {project, classifications}, i in @props.projects
          width = (classifications ? 1) / totalClassifications
          if width < @props.cutoff
            others.push {project, classifications}
            continue
          else
            band = <rect key={project} fill={@getProjectColor project} stroke="none" x={lastX} y="0" width={width} height="1">
              <title>
                {project}: {classifications ? '?'}
              </title>
            </rect>
            lastX += width
