import React from 'react'
import I18n from 'i18n!cyoe_assignment_sidebar'
  const { string, number, func } = React.PropTypes

  class BreakdownGraph extends React.Component {
    static propTypes = {
      rangeStudents: number.isRequired,
      totalStudents: number.isRequired,
      lowerBound: string.isRequired,
      upperBound: string.isRequired,
      rangeIndex: number.isRequired,
      selectRange: func.isRequired,
    }

    constructor () {
      super()
      this.selectRange = this.selectRange.bind(this)
    }

    selectRange () {
      this.props.selectRange(this.props.rangeIndex)
    }

    renderInnerBar() {
      const width = Math.min((this.props.rangeStudents / this.props.totalStudents) * 100, 100)
      const progressBarStyle = { width: width + '%' }
      if (width > 0) {
        return (
          <div style={progressBarStyle} className='crs-bar__horizontal-inside-fill'></div>
        )
      } else {
        return null
      }
    }

    render () {

      return (
        <div className='crs-bar__container'>
          <div className='crs-bar__horizontal-outside'>
            <div className='crs-bar__horizontal-inside'></div>
            { this.renderInnerBar() }
          </div>
          <div className='crs-bar__bottom'>
            <span className='crs-bar__info'>{I18n.t('%{lowerBound}+ to %{upperBound}', {
              upperBound: this.props.upperBound,
              lowerBound: this.props.lowerBound,
            })}
            </span>
            <button
              className='crs-link-button'
              onClick={this.selectRange}
              aria-label={I18n.t('View range student details')}
            >
              {I18n.t('%{rangeStudents} out of %{totalStudents} students', {
                rangeStudents: this.props.rangeStudents,
                totalStudents: this.props.totalStudents,
              })}
            </button>
          </div>
        </div>
      )
    }
  }

export default BreakdownGraph

@@ -981,16 +981,73 @@
 er () %7B%0A
+      const %7B rangeStudents, totalStudents %7D = this.props
 %0A      r
@@ -1680,10 +1680,87 @@
 n.t(
-'V
+%0A                '%25%7BrangeStudents%7D out of %25%7BtotalStudents%7D students, click to v
 iew 
@@ -1785,25 +1785,16 @@
 ils'
-)%7D%0A   
+,%0A
       
-   %3E%0A
     
@@ -1803,23 +1803,10 @@
     
-    %7BI18n.t('%25
 %7B
+ 
 rang
@@ -1810,35 +1810,26 @@
 angeStudents
-%7D out of %25%7B
+, 
 totalStudent
@@ -1833,22 +1833,123 @@
 ents
-%7D students', %7B
+ %7D%0A              )%7D%0A              title=%7BI18n.t('View range student details')%7D%0A            %3E%0A              %7BI18n.t(
 %0A   
@@ -1957,24 +1957,27 @@
             
+'%25%7B
 rangeStudent
@@ -1981,34 +1981,43 @@
 ents
-: this.props.rangeS
+%7D out of %25%7BtotalStudents%7D s
 tudents
+'
 ,%0A  
@@ -2030,29 +2030,31 @@
         
-total
+%7B range
 Students
 : this.p
@@ -2045,29 +2045,18 @@
 Students
-: this.props.
+, 
 totalStu
@@ -2060,17 +2060,18 @@
 Students
-,
+ %7D
 %0A       
@@ -2069,33 +2069,32 @@
 %7D%0A              
-%7D
 )%7D%0A            %3C

ensure cyoe stats text is screenreader friendly