import React, { Component } from 'react';

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

export default class PieChart extends Component {
  constructor() {
    super();
    this.state = {init: false};
  }
  
  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)
  }
  
  getChartValue(value) {
    const timeSplit = value.split(':');
    return (timeSplit.length > 1) ? (parseInt(timeSplit[0])*60 + parseInt(timeSplit[1])) : (parseFloat(value));
  }
  
  getWedgeAngle(value, total) {
    return (value/total > 0.5) ? 0-(((value/total)%0.5)*360) : (((value/total)%0.5)*360);
  }
  
  getDonutPercentage(aValue, bValue) {
    let aDegree, bDegree, aPreDegree = 180, bPreDegree = 180;
    const total = aValue + bValue;
    return 0 !== total && (aPreDegree = 360 * aValue / total,
    bPreDegree = 360 * bValue / total,
    aDegree = Math.round(aPreDegree) - 180,
    bDegree = Math.round(bPreDegree) - 180),
    0 !== aValue && 0 !== bValue || !(aValue > 0 || bValue > 0) || (aValue > 0 ? (aDegree = 180,
    bDegree = 0) : (aDegree = 0,
    bDegree = 180)),
    aDegree > bDegree ? (aDegree = Math.abs(aDegree),
    bDegree = Math.abs(bDegree)) : (aDegree = -Math.abs(aDegree),
    bDegree = -Math.abs(bDegree)),
    [aDegree, bDegree]
  }
  
  getTeamWedges(teams) {
    const total = teams.reduce((acc, team) => {
              const timeSplit = team.chart.value.split(':');
              return (timeSplit.length > 1) ? (parseInt(timeSplit[0])*60 + parseInt(timeSplit[1]) + acc) : (parseFloat(team.chart.value) + acc);
            }, 0),
            //value = this.getChartValue(teams[1].chart.value),
            //wedgeDegrees = this.getWedgeAngle(value, total),
            dps = this.getDonutPercentage(this.getChartValue(teams[0].chart.value), this.getChartValue(teams[1].chart.value));
            
    console.log('wedgedegrees', dps, total);
            
    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),
            //overHalf = (value/total > 0.5),
            //wedgeDegrees = overHalf ? 360 * (value / total),
      const color = this.getColor('#' + team.color, 5),
            //containerClip = overHalf ? 'none' : 'polygon(51.5% 0%, 100% 0%, 100% 100%, 51.5% 100%)';
            containerClip = ((dps[0] <= 0) && (idx === 0)) ? 'polygon(51.5% 0%, 100% 0%, 100% 100%, 51.5% 100%)' : ((dps[0] > 0) && (idx === 1)) ? 'polygon(0% 0%, 46.5% 0%, 46.5% 100%, 0% 100%)' : 'none',
            extensionClass = 'wedge-extension' + ((((dps[0] <= 0) && (idx === 1)) || ((dps[0] > 0) && (idx === 0))) ? ' active' : ''),
            extensionClip = ((dps[0] > 0) && (idx === 0)) ? 'polygon(48.5% 0%, 100% 0%, 100% 100%, 48.5% 100%)' : ((dps[0] <= 0) && (idx === 1)) ? 'polygon(0% 0%, 48.5% 0%, 48.5% 100%, 0% 100%)' : 'none';

      return (
        <div key={idx} id={'wedge-' + String.fromCharCode(97 + idx)} className="wedge-container" style={{clipPath: containerClip}}>
    			<div className="wedge" style={{backgroundColor: color, transform: 'rotate(' + dps[idx] + 'deg)'}}></div>
    			<div className={extensionClass} style={{backgroundColor: color, clipPath: extensionClip}}></div>
    		</div>
      )
    });
  }
  
  
  getTemplate(teams, teamWedges) {
    const size = this.props.size || 86;
    
    return (
      <div className="chart-container">
        <div className="data-chart" style={{width: size, height: size}}>
        	<div className="outer-circle">
        		{teamWedges}
        	</div>
        	<div className="inner-circle">
        	  <span className="home-team">{teams[1].abbreviation}</span>
        	  <span className="away-team">{teams[0].abbreviation}</span>
        	</div>
        </div>
        <span className="value-home time">{teams[0].chart.value}</span>
        <span className="value-away time">{teams[1].chart.value}</span>
      </div>
    )
  }

  render() {
    console.log('teams are', this.state.init, this.props.teams);
    
    let teamWedges;
    const teams = this.props.teams;
          
    if (!this.state.init) {
      teamWedges = teams.reverse().map((team, idx) => {
        const color = this.getColor('#' + team.color, 5);

        return (
          <div key={idx} id={'wedge-' + String.fromCharCode(97 + idx)} className="wedge-container">
      			<div className="wedge" style={{backgroundColor: color}}></div>
      			<div className="wedge-extension" style={{backgroundColor: color}}></div>
      		</div>
        )
      });
      setTimeout(() => {this.setState({init: true})}, this.props.timeout || 500);
      
    }
    else {
      teamWedges = this.getTeamWedges(teams);
    }
        
    return this.getTemplate(teams, teamWedges);
  }
}