/* eslint-disable */
import React, { useEffect, useState } from "react";
import classnames from "classnames";
import HighchartsReact from "highcharts-react-official";
import highchartsMore from "highcharts/highcharts-more";

import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
import mapColors from "../pb_dashboard/pbChartsColorsHelper";
import { globalProps } from "../utilities/globalProps";
import { buildAriaProps, buildDataProps } from "../utilities/props";

type CircleChartProps = {
  align?: "left" | "right" | "center",
  aria: { [key: string]: string },
  chartData?: [],
  children?: Node,
  className?: string,
  colors?: string[],
  dark?: Boolean,
  data?: Object,
  dataLabelHtml?: string,
  dataLabels?: boolean,
  height?: string,
  id?: string,
  innerSize?: "sm" | "md" | "lg" | "none",
  legend?: boolean,
  maxPointSize?: number,
  minPointSize?: number,
  rounded?: boolean,
  startAngle?: number,
  style?: string,
  title?: string,
  tooltipHtml: string,
  useHtml?: boolean,
  zMin?: number,
  layout?: "horizontal" | "vertical" | "proximate",
  verticalAlign?: "top" | "middle" | "bottom",
  x?: number,
  y?: number,
  borderColor?: string,
  borderWidth?: number,
};

// Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
const alignBlockElement = (event: any) => {
  const itemToMove = document.querySelector(
    `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
  ) as HTMLElement;
  const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
  if (itemToMove !== null) {
    itemToMove.style.height = `${event.target.chartHeight}px`;
    itemToMove.style.width = `${event.target.chartWidth}px`;
    chartContainer.firstChild.before(itemToMove);
  }
};

const CircleChart = ({
  align = "center",
  aria = {},
  rounded = false,
  borderColor = rounded ? null : "",
  borderWidth = rounded ? 20 : null,
  chartData,
  children,
  className,
  colors = [],
  dark = false,
  data = {},
  dataLabelHtml = "<div>{point.name}</div>",
  dataLabels = false,
  height,
  id,
  innerSize = "md",
  legend = false,
  maxPointSize = null,
  minPointSize = null,
  startAngle = null,
  style = "pie",
  title,
  tooltipHtml,
  useHtml = false,
  zMin = null,
  layout = "horizontal",
  verticalAlign = "bottom",
  x = 0,
  y = 0,
  ...props
}: CircleChartProps) => {
  const ariaProps = buildAriaProps(aria);
  const dataProps = buildDataProps(data);
  const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];

  const [options, setOptions] = useState({});
  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);

  useEffect(() => {
    const formattedChartData = chartData.map((obj: any) => {
      obj.y = obj.value;
      delete obj.value;
      return obj;
    });

    const staticOptions = {
      title: {
        text: title,
      },
      chart: {
        height: height,
        type: style,
        events: {
          render: (event: any) => alignBlockElement(event),
          redraw: (event: any) => alignBlockElement(event),
        },
      },

      legend: {
        align: align,
        verticalAlign: verticalAlign,
        layout: layout,
        x: x,
        y: y,
      },
      plotOptions: {
        pie: {
          colors:
            colors.length > 0 ? mapColors(colors) : highchartsTheme(window.Highcharts).colors,
          dataLabels: {
            enabled: dataLabels,
            connectorShape: "straight",
            connectorWidth: 3,
            format: dataLabelHtml,
          },
          showInLegend: legend,
        },
      },
      series: [
        {
          minPointSize: minPointSize,
          maxPointSize: maxPointSize,
          innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
          data: formattedChartData,
          zMin: zMin,
          startAngle: startAngle,
          borderWidth: borderWidth,
          borderColor: borderColor,
        },
      ],
      credits: false,
    };
    setOptions({ ...staticOptions });

    const interval = setInterval(() => {
      if (window.Highcharts) {
        clearInterval(interval)
        dark
          ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
          : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
        
        highchartsMore(window.Highcharts);

        window.Highcharts.setOptions({
          tooltip: {
            headerFormat: null,
            pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
            useHTML: useHtml,
          },
        });

        setIsHighchartsLoaded(true)
      }
    }, 0)
  }, [chartData]);

  return (
    <>
      {children ? (
        <div id={`wrapper-circle-chart-${id}`}>
          {
            isHighchartsLoaded &&
            <HighchartsReact
              containerProps={{
                className: classnames("pb_circle_chart", globalProps(props)),
                id: id,
                ...ariaProps,
                ...dataProps,
              }}
              highcharts={window.Highcharts}
              options={options}
            />
          }
          <div className="pb-circle-chart-block">{children}</div>
        </div>
      ) : (
        isHighchartsLoaded &&
        <HighchartsReact
          containerProps={{
            className: classnames("pb_circle_chart", globalProps(props)),
            id: id,
            ...ariaProps,
            ...dataProps,
          }}
          highcharts={window.Highcharts}
          options={options}
        />
      )}
    </>
  );
};

export default CircleChart;