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 messages from './messages.js';

const colors = ["#f79239", "#4ec3e0", "#1287ed", "#929ba3", "#678096", "#5beeff"];
const disabledColors = ["#f79239", "#4ec3e0", "#1287ed", "#929ba3", "#678096", "#5beeff"];


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

const CHART = fromJS({
	chart: {
	  	labels: [],
		datasets: [
			{
				label: '', 
				type:'line',
	        	lineTension: 0,
				data: [],
				fill: false,
				yAxisID: 'y-axis-2',
				...color(colors[0])
			}, {
				type: 'bar',
				label: '',
				data: [],
				fill: false,
				yAxisID: 'y-axis-1',
					...color(colors[1])
				}, {
				type: 'bar',
				label: '',
				data: [],
				fill: false,
				yAxisID: 'y-axis-1',
					...color(colors[2])
			}
		]
	},

	options: {
		responsive: true,
		animation: false,
		maintainAspectRatio: false,
		barValueSpacing: 10,
		legend: {
        	display: false,
    	},		
		tooltips: {
			callbacks: {
				label: null				
			}
		},
		elements: {
			line: {
					fill: false
			}
		},
		scales: {
		    xAxes: [
		      {
		        display: true,
		        gridLines: {
		          display: false
		        },
		        labels: {
		          show: true
		        },
		        gridLines: {
		        	offsetGridLines: true
		        }
		      }
		    ],
		    yAxes: [
		      {
		        type: 'linear',
		        display: true,
		        position: 'left',
		        id: 'y-axis-1',
		        gridLines: {
		          display: false
		        },
		        labels: {
		          show: true
		        },
				ticks: {
		   			beginAtZero: false,
		   			scaleBeginAtZero: true,
		   			callback: null
		   		}
		      },
		      {
		        type: 'linear',
		        display: true,
		        position: 'right',
		        id: 'y-axis-2',
		        gridLines: {
		          display: true
		        },
		        labels: {
		          show: true
		        },
				ticks: {
		   			beginAtZero: false,
		   			scaleBeginAtZero: true,
		   			callback: null
		        }
		      }
		    ]
		}
	}
});



class CashflowChart extends React.PureComponent {

	prepareChart(data, labels = [], colors, currency, i18n, intl, empty) {
		labels = labels.slice();
		for (let i = 0; i < labels.length; i++) {
			labels[i] = formatDate(labels[i], i18n);
		}

		if (!data || empty) {
			data = {
				balance: [],
				income: [],
				outcome: []
			};

			for (let i = 0; i < labels.length; i++) {
				/*
				data.balance.push(1000 + i * 300);
				data.income.push(1000 + i * 500);
				data.outcome.push(1000 + i * 200);
				*/
				data.balance.push(0);
				data.income.push(0);
				data.outcome.push(0);
			}
		}

		let values = CHART.withMutations(map => {
			map.setIn(["chart", "labels"], labels);
			map.setIn(["chart", "datasets", 0, "data"], data.balance);
			map.setIn(["chart", "datasets", 1, "data"], data.income);
			map.setIn(["chart", "datasets", 2, "data"], data.outcome);
			
			map.setIn(["chart", "datasets", 0, "label"], intl.formatMessage(messages.balance))
			map.setIn(["chart", "datasets", 0, "label"], intl.formatMessage(messages.income))
			map.setIn(["chart", "datasets", 0, "label"], intl.formatMessage(messages.outcome))
			
			map.setIn(["options", "tooltips", "callbacks", "label"], function(tooltipItem, data) { return formatMoney(tooltipItem.yLabel, currency, i18n) });
			map.setIn(["options", "scales", "yAxes", 0, "ticks", "callback"], function(label, index, labels) { return formatNumber(label, i18n); });
			map.setIn(["options", "scales", "yAxes", 1, "ticks", "callback"], function(label, index, labels) { return formatNumber(label, i18n); });
		});

		return values.toJS();
	}

	//TODO translate data
	//TODO prepare empty data

	render() {
		const { 
			status, 
			unitId, 
			data, 
			labels, 
			i18n,
			currency,
			currencyFormat,
			intl
 			} = this.props;

		if (!labels) {
			return null;
		}

		const { chart, options } = this.prepareChart(data, labels, colors, currency, i18n, intl);
		return <Bar data={ chart } options={ options } height={ 300 } type='horizontal' />			
	}

}

export default injectIntl(CashflowChart);
