import PieChart from './PieChart';
import BarChart from './BarChart';

export interface Props {
  type: 'PieChart' | 'BarChart';
  chartData: {
    datasets: {
      data: number[];
      backgroundColor: string[];
      toolTipMailArray: string[];
      userLegendMailArray: string[];
      count: number[];
    }[];
    labels: string[];
  };
  legendHeight: string;
  legendTitle: string;
  legendSubtitle: string;
  legendTitleColor: string;
  chartSize: string;
  legend: boolean;
  legendSubTitleValue: number;
  centerText: boolean;
  legeContainerWidth: string;
  chartHeight: string;
  chartWidth: string;
  toolTipText: string;
  isLegendUser: boolean;
  xAxisLabel: string;
  yAxisLabel: string;
}

const Chart = ({
  type = 'PieChart',
  chartData,
  legend,
  legendSubTitleValue,
  legendHeight,
  legendTitle,
  legendTitleColor,
  legendSubtitle,
  chartSize,
  centerText,
  legeContainerWidth,
  chartHeight,
  chartWidth,
  toolTipText,
  isLegendUser,
  xAxisLabel,
  yAxisLabel,
}: Props) => {
  const mode = type === 'PieChart' ? 'PieChart' : 'BarChart';

  if (mode === 'PieChart') {
    return (
      <PieChart
        chartData={chartData}
        legend={legend}
        legendHeight={legendHeight}
        legendTitle={legendTitle}
        legendTitleColor={legendTitleColor}
        legendSubtitle={legendSubtitle}
        chartSize={chartSize}
        legendSubTitleValue={legendSubTitleValue}
        centerText={centerText}
        legeContainerWidth={legeContainerWidth}
        isLegendUser={isLegendUser}
      />
    );
  }
  return (
    <BarChart
      chartData={chartData}
      chartHeight={chartHeight}
      chartWidth={chartWidth}
      toolTipText={toolTipText}
      xAxisLabel={xAxisLabel}
      yAxisLabel={yAxisLabel}
    />
  );
};

export default Chart;