import React, { Component } from 'react';

import { Bar, HorizontalBar } from 'react-chartjs-2';
import palette from 'utils/palette';
import { injectIntl } from 'react-intl';

import messages from './messages.js';




function emptyLabels() {
    let years = [];
    for (let i = 1; i < 11; i++) {
        years.push(i);
    }
    return years;
}

function emptyValues() {
    let years = [];
    for (let i = 1; i < 11; i++) {
        years.push(0);
    }
    return years;
}


export default injectIntl((props) => {
    let { className, values, intl } = props;

    let empty = false;
    if (!values) {
        empty = true;
    }

    let color = palette(global._chartColors, 1)[0];
    let data = {
        labels: emptyLabels(),
        datasets: [{
            label: 'X',
            backgroundColor: color,
            borderColor: color,
            borderWidth: 1,
            hoverBackgroundColor: color,
            hoverBorderColor: color,
            data: empty ? emptyValues() : values
        }]
    };

	const options = {
	    responsive: true,
	    animation: false,
	    maintainAspectRatio: false,
	    legend: {
	        display: false,
	    },      
	    tooltips: {
	        display: false,
	        callbacks: {
		        title: function(tooltipItem, data) {
		            return intl.formatMessage(messages.title, { rating: data.labels[tooltipItem[0].index] });
	    	    },
	            label: function(tooltipItem, data) {
	            	return intl.formatMessage(messages.value, { count: data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] });
	        	}
	        }
	    },

	};

    return (
        <div className={ className } style={{ minHeight: 300 }}>
            <Bar data={ data } options={ options } />
        </div>
    );
});