import React, { Component } from 'react';
import { Doughnut } from 'react-chartjs-2';
import DoughnutChartLegend from 'components/DoughnutChartLegend';
import { formatNumber, formatPercent } from 'lib/i18n';
import palette from 'utils/palette';

import { injectIntl } from 'react-intl';
import messages from './messages.js';


require('./style.scss');

const chartColors = palette(["#4EC3E0", "#1287ED"], 10);
const emptyColors = palette(["#BEBEBE"], 10);

let options = {
    cutoutPercentage: 65,
    animate: false,
    maintainAspectRatio: false,
    legend: {
        animate: false,
        display: false 
    },
    animation: {
        animateScale: false,
        animateRotate: false,
    },    
};

function renderTooltip(i18n, labels, currency, empty) {
    if (empty) {
        return () => {
            return formatNumber(0, i18n);
        };
    }
    return (tooltipItem, data) => {
        let dataset = data.datasets[tooltipItem.datasetIndex];
        let total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
            return previousValue + currentValue;
        });
        let currentValue = dataset.data[tooltipItem.index];
        return currentValue + " (" + formatPercent(currentValue / total * 100, i18n) + ")";
    }
}

function renderTitle(intl, labels, empty) {
    return (tooltipItem, data) => {
        return data.labels[tooltipItem[0].index];
    }
}




export default injectIntl(({ data, empty, currency, i18n, intl, className = "p10", ...props }) =>  {


    let sums = [];
    let vals = [];
    let labels = [];
    let colors = [];
    
    let total = 0, val = 0;
    let percents = [];

    for (let i = 10; i > 0; i--) {
        labels.push(intl.formatMessage(messages.rating, { rating: i }));
    }

    if (!data || empty) {
        colors = emptyColors;
        for (let i = 10; i > 0; i--) {
            sums.push(1);
            vals.push(0);
        }
        sums.map(s => percents.push(0));

    } else {
        colors = chartColors;
        for (let i = 10; i > 0; i--) {
            val = data[i] || 0;
            sums.push(val);
            vals.push(val);
            total += val;
        }

        if (total == 0) {
            sums.forEach(s => percents.push(0));
            sums = sums.map(s => 1);

        } else {
            sums.forEach(s => percents.push(s / total * 100));
        }

    }


    let chart = null;

    let chartData = {
        labels: labels,
        datasets: [{
            data: sums,
            backgroundColor: colors
        }]
    };

    let tooltip = renderTooltip(i18n, labels, currency, total == 0 || empty || !data);
    let title = renderTitle(intl, labels, total == 0 || empty || !data);
   
    return (
        <div className={ className }>
            <div className="status-chart">
                <div>
                    <div className="status-chart-div">
                        <Doughnut data={ chartData } options={ { ...options, tooltips: { callbacks: { label: tooltip, title: title }} } } redraw={ true }/>
                    </div>
                </div>
                <div>
                    <DoughnutChartLegend labels={ labels } colors={ colors } values={ vals } percents={ percents } i18n={ i18n } useChartColors/>
                </div>
            </div>
        </div>
    );
    
});
