/**
 * LineChart, wrapper around the ChartJS Line chart for DCE widgets
 * @author Jackson Parsells
 */

// Import React
import React from 'react';

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

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

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

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

// chart JS registry
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  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 points on the line
  points: {
    // Numerical value of the point
    value: number,
    // Label describing the point
    // label?: string,
    label: string,
    // Color of the point
    color?: Color,
  }[],
};

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

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

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

  // Add colors to props
  const pointsWithColors = addColors(points);

  // Create label list
  const labels = pointsWithColors.map((point) => {
    return point.label;
  });

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

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

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

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

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

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

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

// Export component
export default LineChart;