import React from 'react';
import RingChart from 'components/RingChart';

const RING_COLOR = {
  'low-risk': {
    foregroundColor: '#45ba80',
    backgroundColor: '#a2ddbf'
  },
  'medium-risk': {
    foregroundColor: '#fcbd68',
    backgroundColor: '#fcdeb3'
  },
  'high-risk': {
    foregroundColor: '#f1645c',
    backgroundColor: '#f9b1ad'
  },
  'unknown-risk': {
    foregroundColor: '#74848a',
    backgroundColor: '#bac1c4'
  }
};

class StudentsRiskLevelChart extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  get riskLevels() {
    const riskLevels = this.props['risk-levels'];
    if (riskLevels) {
      return riskLevels
    } else {
      return [];
    }
  }

  render() {
    const riskLevelsChart = this.riskLevels.map(item => {
      return <div key={item.name} className="overview-retention-chart__item">
              <RingChart radius="70" ringWidth="8" percent={item['risk-percentage'] / 100} {...RING_COLOR[item.name]}/>
             </div>
    });
    return (
      <div>
        <h2>
          Students Who will drop-out
        </h2>
        <div>
          Over the next <strong>days</strong>, forecast <strong>students will drop-out</strong>
        </div>
        <div className="overview-retention-chart">
          {riskLevelsChart}
        </div>
        <div class="overview-retention-chart__content"></div>
      </div>
    );
  }
}

StudentsRiskLevelChart.defaultProps = {

};

export default StudentsRiskLevelChart;

@@ -65,16 +65,53 @@
 gChart';
+%0Aimport classnames from 'classnames';
 %0A%0Aconst 
@@ -472,16 +472,158 @@
   %7D%0A%7D;%0A%0A
+const RISK_NAME_MAPPING = %7B%0A  'low-risk': 'low risk',%0A  'medium-risk': 'at-risk',%0A  'high-risk': 'high risk',%0A  'unknown-risk': 'unknown'%0A%7D;%0A%0A
 class St
@@ -728,16 +728,72 @@
 ntext);%0A
+    this.state = %7B%0A      selected: 'medium-risk'%0A    %7D;%0A
   %7D%0A%0A  g
@@ -974,55 +974,267 @@
 nst 
-riskLevelsChart = this.riskLevels.map(item =%3E %7B
+%7B%5B'total-students'%5D: totalStudents%7D = this.props;%0A%0A    const riskLevelsChart = this.riskLevels.map(item =%3E %7B%0A      const divStyle = %7B%0A        color: %60$%7BRING_COLOR%5Bitem.name%5D.foregroundColor%7D%60%0A      %7D;%0A      const selected = item.name === this.state.selected;%0A
 %0A   
@@ -1266,33 +1266,45 @@
 name%7D className=
-%22
+%7Bclassnames('
 overview-retenti
@@ -1317,17 +1317,94 @@
 rt__item
-%22
+', selected ? 'selected' : '' )%7D onClick=%7Bthis.onSelect.bind(this, item.name)%7D
 %3E%0A      
@@ -1517,16 +1517,289 @@
 ame%5D%7D/%3E%0A
+              %3Ch2 className=%22overview-retention-chart__item__title%22 style=%7BdivStyle%7D%3E%0A                %3Cstrong%3E%7BRISK_NAME_MAPPING%5Bitem.name%5D%7D%3C/strong%3E%0A              %3C/h2%3E%0A              %3Ch2%3E%0A                %3Cstrong%3E%7Bitem.count%7D%3C/strong%3E / %7BtotalStudents%7D%0A              %3C/h2%3E%0A
         
@@ -1818,16 +1818,17 @@
     %7D);%0A
+%0A
     retu
@@ -2145,16 +2145,20 @@
 iv class
+Name
 =%22overvi
@@ -2216,16 +2216,89 @@
   );%0A  %7D
+%0A%0A  onSelect(name) %7B%0A    this.setState(%7B%0A      selected: name%0A    %7D);%0A  %7D
 %0A%7D%0A%0AStud

add select event