/* global fetch */

import React from 'react';
import { Pie } from 'react-chartjs-2';
import 'whatwg-fetch';

export default class UserStatisticsPage extends React.Component {
  constructor(props) {
    super(props);

    this.chartOptions = {
      maintainAspectRatio: true,
      legend: {
        onClick: () => { /* Do nothing */
        }
      },
      tooltips: {
        callbacks: {
          label(tooltipItem, data) {
            return `${data.labels[tooltipItem.index]}: ${data.datasets[0].data[tooltipItem.index]}%`;
          }
        }
      }
    };

    this.state = {
      successRate: 0,
      chartData: {
        labels: [
          'Rätt gissningar', 'Totala gissningar'
        ],
        // scales: {   ticks: {     min: 0,     max: 100   } },
        datasets: [
          {
            backgroundColor: [
              'rgba(130,230,130,1.0)', 'rgba(130,170,130,0.4)'
            ],
            // borderColor: 'rgba(130,130,130,0)', borderWidth: 5, hoverBackgroundColor:
            // 'rgba(30,130,130,0.4)', hoverBorderColor: 'rgba(30,130,130,1)',
            data: [0, 100]
          }
        ]
      }
    };

    this.getUserStatistics();
  }
  getUserStatistics() {
    fetch(`api/statistics/${this.props.username}`, { credentials: 'same-origin' })
      .then(response => response.json())
      .then(data => this.updateData(data))
      .catch(ex => console.log('Fel vid hämtning av användarstatistik', ex));
  }

  updateData(newSuccessRate) {
    this.setState({
      successRate: newSuccessRate,
      chartData: {
        labels: [
          'Rätt gissningar', 'Totala gissningar'
        ],
        datasets: [
          {
            label: [
              'Rätt gissningar', 'Totala gissningar'
            ],
            backgroundColor: [
              'rgba(130,200,130,1.0)', 'rgba(130,170,130,0.4)'
            ],
            data: [
              newSuccessRate, 100 - newSuccessRate
            ]
          }
        ]
      }
    });
  }

  render() {
    return (
      <div className="text-center">
        <h2>Din totala svarsprocent är {this.state.successRate}%</h2>
        <Pie data={this.state.chartData} options={this.chartOptions} />
      </div>
    );
  }
}

UserStatisticsPage.propTypes = {
  username: React.PropTypes.string.isRequired
};

@@ -1500,45 +1500,34 @@
 ate(
-%7B
 %0A      
-successRate: newSuccessR
+%7B ...this.st
 ate,%0A
+  
     
@@ -1541,32 +1541,34 @@
 Data: %7B%0A        
+ 
+ 
 labels: %5B%0A      
@@ -1553,32 +1553,34 @@
       labels: %5B%0A
+  
           'R%C3%A4tt 
@@ -1612,35 +1612,39 @@
 ningar'%0A        
+ 
+ 
 %5D,%0A
+  
         datasets
@@ -1639,32 +1639,34 @@
     datasets: %5B%0A
+  
           %7B%0A    
@@ -1669,24 +1669,26 @@
             
+  
 label: %5B%0A   
@@ -1680,24 +1680,26 @@
    label: %5B%0A
+  
             
@@ -1743,35 +1743,39 @@
 ar'%0A            
+ 
+ 
 %5D,%0A
+  
             back
@@ -1781,32 +1781,34 @@
 kgroundColor: %5B%0A
+  
               'r
@@ -1858,35 +1858,39 @@
 4)'%0A            
+  
 %5D,%0A
+  
             data
@@ -1907,16 +1907,18 @@
         
+  
 newSucce
@@ -1954,26 +1954,30 @@
             
-%5D%0A
+  %5D%0A  
           %7D%0A
@@ -1976,33 +1976,45 @@
       %7D%0A        
-%5D
+  %5D%0A        %7D
 %0A      %7D%0A    %7D);
@@ -2006,21 +2006,20 @@
       %7D%0A
+
     
-%7D
 );%0A  %7D%0A%0A

use spread instead