import React, { Component } from 'react';

import { fromJS } from 'immutable';

import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'
import { Line } from 'react-chartjs-2'
import { Bar } from 'react-chartjs-2'
import { HorizontalBar } from 'react-chartjs-2'

import { formatDate, formatMoney, formatNumber } from 'lib/i18n'

import palette from 'utils/palette';

require("./style.scss");

const draftColor = "#BABABA", plannedColor = "#08acff", finishedColor = "#00c900", overdueColor = "#ff0707", emptyColor = "#DEDEDE";

const color = (summary) => {
    return {
        borderColor: summary,
        backgroundColor: summary,
        pointBorderColor: summary,
        pointBackgroundColor: summary,
        pointHoverBackgroundColor: summary,
        pointHoverBorderColor: summary,
    };
};



export default injectIntl((props) => {
    const { 
        status, 
        unitId, 

        draft,
        active,
        finished,
        overdue,
        
        dates,
        i18n,
        currencySymbol, 
        currency,
        currencyFormat,
        intl,

        draftLabel,
        activeLabel,
        finishedLabel,
        overdueLabel

        } = props;

    if (!dates) {
        return null;
    }

    //TODO detect whether is empty?
    let labels = dates.slice();
    for (let i = 0; i < labels.length; i++) {
        labels[i] = formatDate(labels[i], i18n);
    }

    const chart = {
        labels,
        datasets: [
            {
                label: draftLabel,
                data: draft,
                ...color(draftColor)
            },
            {
                label: activeLabel,
                data: active,
                ...color(plannedColor)
            },
            {
                label: finishedLabel,
                data: finished,
                ...color(finishedColor)
            },
            {
                label: overdueLabel,
                data: overdue,
                ...color(overdueColor)
            },
        ]
    };

    let options = {
        responsive: true,
        animation: false,
        maintainAspectRatio: false,
        barValueSpacing: 10,
        tooltips: {
            callbacks: {
                label: (tooltipItem, data) => formatMoney(tooltipItem.yLabel, currencySymbol || currency, i18n)
            }
        },
        elements: {
            line: {
                    fill: false
            }
        },
        legend: {
            display: false 
        },
        scales: {
            xAxes: [
              {
                display: true,
                gridLines: {
                  display: false
                },
                labels: {
                  show: true
                },
                gridLines: {
                    offsetGridLines: true
                }
              }
            ],
            yAxes: [
              {
                type: 'linear',
                display: true,
                position: 'left',
                gridLines: {
                  display: true
                },
                labels: {
                  show: true
                },
                ticks: {
                    beginAtZero: false,
                    scaleBeginAtZero: true,
                    callback: (label, index, labels) => formatNumber(label, i18n)
                }
              }
            ]
        }
    };

    return (
        <div className="customer-timeline-chart">
            <Bar data={ chart } options={ options } height={ 300 } type='horizontal' redraw={ true } />
        </div>
    );

});
