import {
  Chart,
  ChartLegendItem,
  ChartLegendTitle,
  PaneDefaults,
} from "@progress/kendo-react-charts";
import {
  ChartCategoryAxis,
  ChartCategoryAxisItem,
  ChartLegend,
  ChartSeries,
  ChartTitle,
  Overlay,
} from "@progress/kendo-react-charts";
import { generateChartSeriesItem } from "../../../helper";

import { ComprehensiveProps } from "../../DomainProps";

interface SeriesData {
  data?: any[];
  name: string;
  share?: number; // percentage of the total for pie chart
  explode?: boolean; // explode pie chart
}

export interface ChartProps extends ComprehensiveProps {
  title?: string | undefined;
  axisItemCategoryData?: any[];
  axisItemCategoryAngle?: number;
  position?: "bottom" | "top" | "left" | "right" | "custom" | undefined;
  align?: "center";
  seriesColors?: any[];
  legendOrientation: "horizontal" | "vertical";
  visible?: boolean;
  seriesItemData?: SeriesData[];
  type?: any;
  isApplyToolTip?: boolean;
  isApplyLabelForCircularChart?: boolean;
  isChartLabelContentVisible?: boolean;
  labelContentField?:
    | "dataItem"
    | "category"
    | "percentage"
    | "series"
    | "value";
  overlay?: Overlay | undefined;
  paneDefault?: PaneDefaults;
  circularChartCenterRender?: () => React.ReactElement;
}

const chartLabelContent = (ele: any, field: string = "dataItem") => {
  return ele[`${field}`];
};

function ChartWidget({
  id,
  widgetStyle,
  title,
  axisItemCategoryData,
  axisItemCategoryAngle,
  align,
  position,
  visible,
  seriesItemData,
  type,
  isApplyToolTip,
  legendOrientation,
  overlay,
  isChartLabelContentVisible,
  labelContentField,
  circularChartCenterRender,
  seriesColors,
}: ChartProps) {
  let chartSeriesItem: any = {};

  // setup attributes for chartSeriesItem in circular charts
  if (type === "pie" || type === "donut" || type === "radarLine") {
    chartSeriesItem.overlay = overlay;
    chartSeriesItem.categoryField = "name";
    chartSeriesItem.field = "share";
  }

  return (
    <Chart
      className={widgetStyle?.className || ""}
      donutCenterRender={circularChartCenterRender}
      paneDefaults={{ clip: false }}
      axisDefaults={{
        visible: false,
        majorGridLines: { visible: false },
      }}
      seriesColors={seriesColors}
    >
      <ChartTitle text={title} />
      <ChartCategoryAxis>
        <ChartCategoryAxisItem
          categories={axisItemCategoryData}
          startAngle={axisItemCategoryAngle}
        />
      </ChartCategoryAxis>
      <ChartSeries>
        {generateChartSeriesItem(
          seriesItemData,
          isApplyToolTip,
          type,
          chartSeriesItem,
          isChartLabelContentVisible,
          chartLabelContent,
          labelContentField
        )}
      </ChartSeries>
      <ChartLegend
        align={align}
        position={position}
        orientation={legendOrientation}
        visible={visible}
        labels={{ font: "10px IBM Plex Sans", color: "#808080" }}
      ></ChartLegend>
    </Chart>
  );
}

export default ChartWidget;
