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

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


require('./style.scss');

const draftColor = "#BABABA", plannedColor = "#08acff", finishedColor = "#00c900", overdueColor = "#ff0707", emptyColor = "#DEDEDE";
const emptyColors = palette(["#BEBEBE"], 4);

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 formatMoney(0, currency, 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 formatMoney(currentValue, currency, i18n) + " (" + formatPercent(currentValue / total * 100, i18n) + ")";
    }
}


export default injectIntl(({ data, empty, currency, i18n, intl, className = "p10", ...props }) =>  {
    let { 
        draftLabel = intl.formatMessage(messages.draftLabel), 
        activeLabel = intl.formatMessage(messages.activeLabel), 
        finishedLabel = intl.formatMessage(messages.finishedLabel), 
        overdueLabel = intl.formatMessage(messages.overdueLabel)
    } = props;

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

    if (!data || empty) {
        if (draftLabel) {
            labels.push(draftLabel);
            colors.push(emptyColors[0]);
            sums.push(1);
            vals.push(0);
        }

        if (activeLabel) {
            labels.push(activeLabel);
            colors.push(emptyColors[1]);
            sums.push(1);
            vals.push(0);
        }

        if (finishedLabel) {
            labels.push(finishedLabel);
            colors.push(emptyColors[2]);
            sums.push(1);
            vals.push(0);
        }

        if (overdueLabel) {
            labels.push(overdueLabel);
            colors.push(emptyColors[3]);
            sums.push(1);
            vals.push(0);
        }

        sums.map(s => percents.push(0));

    } else {
        if (draftLabel) {
            labels.push(draftLabel);
            colors.push(draftColor);
            val = data.draft || 0;
            sums.push(val);
            vals.push(val);
            total += val;
        }

        if (activeLabel) {
            labels.push(activeLabel);
            colors.push(plannedColor);
            val = data.active || 0;
            sums.push(val);
            vals.push(val);
            total += val;
        }

        if (finishedLabel) {
            labels.push(finishedLabel);
            colors.push(finishedColor);
            val = data.finished || 0;
            sums.push(val);
            vals.push(val);
            total += val;
        }

        if (overdueLabel) {
            labels.push(overdueLabel);
            colors.push(overdueColor);
            val = data.overdue || 0;
            vals.push(val);
            sums.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);
   
    return (
        <div className={ className }>
            <div className="status-chart">
                <div>
                    <div className="status-chart-div">
                        <Doughnut data={ chartData } options={ { ...options, tooltips: { callbacks: { label: tooltip }} } } redraw={ true }/>
                    </div>
                </div>
                <div>
                    <DoughnutChartLegend labels={ labels } colors={ colors } values={ vals } percents={ percents } currency={ currency } i18n={ i18n } useChartColors/>
                </div>
            </div>
        </div>
    );
    
});
