import React, { Component } from 'react';

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

import { Bar, Doughnut, HorizontalBar } from 'react-chartjs-2';
import DoughnutChartLegend from 'components/DoughnutChartLegend';
import palette from 'utils/palette';
import icons from 'constants/icons';


const options = {
    responsive: true,
    animation: false,
    maintainAspectRatio: false,
    barValueSpacing: 10,
    legend: {
        display: false,
    },      
    tooltips: {
        display: false,
        callbacks: {
            label: () => ""
        }
    },

};

let emptyCount = 5;

function emptyLabels() {
    let year = (new Date()).getFullYear();
    let years = [];
    for (let i = 0; i < emptyCount; i++) {
        years.push(year - i);
    }

    return years;
}

function emptyValues() {
    return emptyLabels();
}


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

    if (!years || !values) {
        empty = true;
    }

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

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