import React, { ReactElement } from 'react';
import ChartJS, { TooltipModel, ChartType, ChartDataset, DefaultDataPoint, TooltipItem } from 'chart.js/auto';
import { WrapperProps } from '../Wrapper';
import { TitleProps } from '../Title';
import { ToggleGroupProps } from '../ToggleButtonGroup';
import { DateRangePickerProps, DatePickerProps, RangePickerDatesType } from '../Calendar';
import { ThemeObject } from '../Theme';

// Line Chart
type TooltipDataType = [ReactElement, string, string];

export type ContextType = {
  chart: ChartJS;
  tooltip: TooltipModel<ChartType>;
};

export type ChartLinePointType = {
  value: number;
  tooltipData: TooltipDataType[];
};

export type ChartLineDataSet = {
  points: ChartLinePointType[];
  color: keyof ThemeObject['pallet'];
  lineTension?: number;
  label?: string;
};

export type ChartLineProps = {
  dataSets: ChartLineDataSet[];
  nameAxisX?: string;
  nameAxisY?: string;
  labelValuesY: string[];
  labelValuesX: string[];
  valuesXForTooltip: string[];
  tooltipTitle: string;
};

export type WrappedLineProps = {
  wrapperProps: WrapperProps;
  title?: string;
  titleProps?: TitleProps;
  toggleProps: Omit<ToggleGroupProps, 'numberOfBtns' | 'ariaLabel' | 'value' | 'onChange'>;
  calendarProps: Omit<DateRangePickerProps, 'id' | 'onChange' | 'isVisible'>;
  monthSelectProps: Omit<DatePickerProps, 'onChange' | 'isVisible' | 'value'>;
  chartData: ChartLineProps;
  onChangeDates: React.Dispatch<React.SetStateAction<RangePickerDatesType>>;
  formatDate?: string;
};

// Doughnut Chart
type ChartDoughnutLabel = {
  label: string;
  value: string;
};
export interface ChartDoughnutDataSet extends ChartDataset<'doughnut', DefaultDataPoint<'doughnut'>> {
  tooltip?: ChartDoughnutLabel[];
  backgroundColor: string[];
}

export type InnerContentType = {
  title: string;
  text: string;
  backgroundColor: keyof ThemeObject['background'];
};

export type ChartDoughnutData = {
  datasets: ChartDoughnutDataSet[];
  doughnutWrapperProps?: WrapperProps;
  innerContainerContent?: InnerContentType;
  spacingWidth?: number;
  centerCutOut?: '50%' | '60%' | '70%' | '80%' | '90%';
};

export type ChartDoughnutProps = {
  data: ChartDoughnutData;
  wrapperProps?: WrapperProps;
  hideTooltip?: boolean | undefined;
  hideLegend?: boolean | undefined;
};

export interface ChartDoughnutTooltipItem extends TooltipItem<'doughnut'> {
  dataset: ChartDoughnutDataSet;
}
