/**
 * DoughnutChart, wrapper around the ChartJS Doughnut chart for DCE widgets
 * @author Jackson Parsells
 */

// Import React
import React from 'react';

// import ChartJS
import { Doughnut } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  ArcElement,
  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(
  ArcElement,
  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 doughnut segment entries
  segments: {
    // Numerical value of the segment
    value: number,
    // Label describing the segment
    label: string,
    // Color of the segment
    color?: Color,
  }[],
  // show legend option to toggle the legend
  showLegend?: boolean,
};

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

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

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

  // Add colors to props
  const segmentsWithColors = addColors(segments);

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

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

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

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

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

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

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

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

export default DoughnutChart;