import React, { useState, useEffect } from "react";
import classnames from "classnames";

import { globalProps } from "../utilities/globalProps";
import { buildAriaProps, buildDataProps } from "../utilities/props";

import HighchartsReact from "highcharts-react-official";
import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
import mapColors from "../pb_dashboard/pbChartsColorsHelper";
import treemap from 'highcharts/modules/treemap'

type TreemapChartProps = {
  chartData: {
    name: string,
    parent?: string | number,
    value: number,
    color?: string,
    id?: string | number,
  }[],
  className?: string,
  colors: string[],
  dark?: boolean,
  drillable: boolean,
  grouped: boolean,
  height?: string,
  id: number | string,
  title?: string,
  tooltipHtml: string,
  type?: string,
  aria?: { [key: string]: string },
  data?: { [key: string]: string },
};

const TreemapChart = ({
  aria = {},
  data = {},
  chartData,
  colors,
  dark = false,
  drillable = false,
  grouped = false,
  height,
  id,
  title = "",
  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
  type = "treemap",
  ...props
}: TreemapChartProps) => {
  const ariaProps = buildAriaProps(aria);
  const dataProps = buildDataProps(data);

  const staticOptions = {
    title: {
      text: title,
    },
    chart: {
      height: height,
      type: type,
    },
    credits: false,
    series: [
      {
        data: chartData,
      },
    ],
    plotOptions: {
      treemap: {
        tooltip: {
          pointFormat: tooltipHtml,
        },
        allowTraversingTree: drillable,
        colorByPoint: !grouped,
        colors:
          colors !== undefined && colors.length > 0
            ? mapColors(colors)
            : highchartsTheme.colors,
      },
    },
  };

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

  useEffect(() => {
    setOptions({ ...staticOptions });

    const interval = setInterval(() => {
      if (window.Highcharts) {
        clearInterval(interval)
        dark
          ? window.Highcharts.setOptions(highchartsDarkTheme)
          : window.Highcharts.setOptions(highchartsTheme)
        
        treemap(window.Highcharts)
        setIsHighchartsLoaded(true)
      }
    }, 0)
  }, [chartData]);

  return (
    isHighchartsLoaded &&
    <HighchartsReact
      containerProps={{
        className: classnames(globalProps(props), "pb_treemap_chart"),
        id: id,
        ...ariaProps,
        ...dataProps,
      }}
      highcharts={window.Highcharts}
      options={options}
    />
  );
};

export default TreemapChart;