/**
 * VerticalBarChart, wrapper around the ChartJS Vertical Bar chart for DCE
 * widgets
 * @author Jackson Parsells
 */

// Import React
import React from 'react';

// import chartjs
import { Bar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

// Import shared type
import Color from '../../shared/types/Color';

// Import shared utils
import addColors from '../../shared/utils/addColors';
import getRGBA from '../../shared/utils/getRGBA';

// Import components
import DownloadBox from '../../shared/components/DownloadBox';

// chart JS registry
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
);

/*------------------------------------------------------------------------*/
/*                                  Types                                 */
/*------------------------------------------------------------------------*/

// props definition
type Props = {
  // Title of the chart
  title: string,
  // If you should show the title on the chart or not
  showTitle?: boolean,
  // List of bar entries
  bars: {
    // Numerical value of the bar
    value: number,
    // Label describing the bar
    label: string,
    // Color of the bar
    color?: Color,
  }[],
};

/*------------------------------------------------------------------------*/
/*                                Component                               */
/*------------------------------------------------------------------------*/

const VerticalBarChart: React.FC<Props> = (props: Props) => {
  /*------------------------------------------------------------------------*/
  /*                                  Setup                                 */
  /*------------------------------------------------------------------------*/

  /* -------------- Props ------------- */
  const {
    title,
    showTitle = true,
    bars,
  } = props;

  // add colors to props
  const barsWithColors = addColors(bars);

  // create label list
  const labels = barsWithColors.map((bar) => {
    return bar.label;
  });

  // create dataset
  const dataset = {
    label: '',
    data: barsWithColors.map((bar) => {
      return bar.value;
    }),
    backgroundColor: barsWithColors.map((bar) => {
      return getRGBA(bar.color, 0.2);
    }),
    borderColor: barsWithColors.map((bar) => {
      return getRGBA(bar.color, 1);
    }),
    borderWidth: 1,
  };

  // data for CSV
  const dataForCSV: {
    [k: string]: string | number
  }[] = bars.map((bar) => {
    return {
      Name: bar.label,
      Value: bar.value,
    };
  });

  // chart data
  const chartData = {
    labels,
    datasets: [dataset],
  };

  // chart options to make the bar vertical
  const options = {
    responsive: true,
    plugins: {
      legend: {
        display: false,
        position: 'top' as const,
      },
      title: {
        display: showTitle,
        text: title,
      },
    },
  };

  /*----------------------------------------*/
  /*                 Main UI                */
  /*----------------------------------------*/

  return (
    <DownloadBox
      chartData={dataForCSV}
      title={title}
    >
      <Bar
        data={chartData}
        options={options}
      />
    </DownloadBox>
  );
};

/*------------------------------------------------------------------------*/
/*                                 Wrap Up                                */
/*------------------------------------------------------------------------*/

// Export component
export default VerticalBarChart;