import React, { Component } from 'react';

//const teamData = require('../config/team-data.json');

export default class LineChart extends Component {
  constructor() {
    super();
    this.state = {init: false};
    this.getTeamBars = this.getTeamBars.bind(this);
  }
  
  getColor(color, percent) {
    const num = parseInt(color.slice(1), 16),
          amt = Math.round(2.55 * percent),
          R = (num >> 16) + amt,
          B = (num >> 8 & 255) + amt,
          G = (255 & num) + amt;
    return "#" + (16777216 + 65536 * (R < 255 ? R < 1 ? 0 : R : 255) + 256 * (B < 255 ? B < 1 ? 0 : B : 255) + (G < 255 ? G < 1 ? 0 : G : 255)).toString(16).slice(1)
  }
  
  getTeamBars() {
    const teams = this.props.teams,
          most = Math.max.apply(Math, teams.map((team) => {
            const timeSplit = team.chart.value.split(':');
            return (timeSplit.length > 1) ? (parseInt(timeSplit[0])*60 + parseInt(timeSplit[1])) : (parseFloat(team.chart.value));
          }));
    return teams.map((team, idx) => {
      const timeSplit = team.chart.value.split(':'),
            value = (timeSplit.length > 1) ? (parseInt(timeSplit[0])*60 + parseInt(timeSplit[1])) : parseFloat(team.chart.value);
            console.log('teambar', value, most)
      return (<li key={idx}>
  			<span className="chartLabel">{team.abbreviation}</span>
  			<span className="bar-total">
  				<span style={{
  				  backgroundColor: this.getColor('#' + team.color, 5),
  				  width: (this.state.init ? (value/most*100)+'%' : '0%')
  				}} className="bar-percentage"></span>
  			</span>
  			<span className="chartValue awayValue">{team.chart.value}</span>
  		</li>);
    });
  }

  render() {
    console.log('teams are', this.props.teams);
    
    if (!this.state.init) {
      setTimeout(() => {this.setState({init: true})}, this.props.timeout || 500);
    }
    
    return (
      <div className="stat-graph">
	      <ul className="compareLineGraph">
        	{this.getTeamBars()}
        </ul>
      </div>
    )
  }
}