import {BaseChart, BaseChartProps} from './base-chart';
import {ChartData, ChartOptions} from 'chart.js';
import {ChartColors} from './chart-colors';
import {useSelectedLocale} from '../i18n/selected-locale';
import {useMemo} from 'react';
import {formatReportData} from './data/format-report-data';
import {DatasetItem, ReportMetric} from '../admin/analytics/report-metric';
import {FormattedDatasetItem} from './data/formatted-dataset-item';
import clsx from 'clsx';

const PolarAreaChartOptions: ChartOptions<'polarArea'> = {
  parsing: {
    key: 'value',
  },
  plugins: {
    tooltip: {
      intersect: true,
    },
  },
};

interface PolarAreaChartProps
  extends Omit<BaseChartProps<'polarArea'>, 'type' | 'data'> {
  data?: ReportMetric<DatasetItem>;
}
export function PolarAreaChart({
  data,
  className,
  ...props
}: PolarAreaChartProps) {
  const {localeCode} = useSelectedLocale();
  const formattedData: ChartData<'polarArea', FormattedDatasetItem[]> =
    useMemo(() => {
      const formattedData = formatReportData(data, {localeCode});
      formattedData.labels = formattedData.datasets[0]?.data.map(d => d.label);
      formattedData.datasets = formattedData.datasets.map((dataset, i) => ({
        ...dataset,
        backgroundColor: ChartColors.map(c => c[1]),
        borderColor: ChartColors.map(c => c[0]),
        borderWidth: 2,
      }));
      return formattedData;
    }, [data, localeCode]);

  return (
    <BaseChart
      type="polarArea"
      data={formattedData}
      options={PolarAreaChartOptions}
      className={clsx(className, 'min-w-500')}
      {...props}
    />
  );
}