import * as React from "react";
import { Options } from "highcharts";

import { useTranslation, HighchartsChart, stringToColor } from "../..";

import { VisualisationProps } from "./types";

import { round, aggregate } from "./helper";

export const Visualisation: React.FC<VisualisationProps> = ({
  state,
  data,
  items,
}) => {
  const [t] = useTranslation(["opendash"]);

  const units = React.useMemo(() => {
    return Object.fromEntries(
      state.items.map(([id, dimension], index) => {
        return [
          items[id].valueTypes[dimension].name +
            items[id].valueTypes[dimension].unit,
          { ...items[id].valueTypes[dimension], index },
        ];
      })
    );
  }, [state?.items, items]);

  const seriesData = React.useMemo(() => {
    return state.items.map(([id, dimension]) => {
      const item = items[id];
      const valueType = item.valueTypes[dimension];

      const values = data[id].map(x => x.value[dimension]);
      const value = round(aggregate(state.settings.aggregation, values), 2);

      return {
        name: `${item.name} (${valueType.name})`,
        _unit: valueType.unit,
        color: stringToColor(item.id),
        y: value,
      };
    });
  }, [state, data]);

  const options = React.useMemo<Options>(() => {
    const result: Options = {
      title: null,
      subtitle: null,

      chart: {
        type: "pie",

        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
      },

      tooltip: {
        pointFormat: "<b>{point.y} {point._unit}</b>",
      },

      plotOptions: {
        pie: {
          dataLabels: {
            enabled: false,
            format: "<b>{point.name}</b>: {point.y} {point._unit}",
          },

          showInLegend: true,

          startAngle: -90,
          endAngle: 360 - 90,
          center: ["50%", "50%"],
          size: "100%",
        },
      },

      legend: {
        enabled: false,
      },

      series: [
        // @ts-ignore
        {
          name: state.settings.series_name as string,
          data: seriesData,
          innerSize: "0%",
        },
      ],
    };

    if (state.settings.style === "donut") {
      // @ts-ignore
      result.series[0].innerSize = "60%";
    }

    if (state.settings.style === "half_donut") {
      // @ts-ignore
      result.series[0].innerSize = "60%";

      Object.assign(result.plotOptions.pie, {
        startAngle: -90,
        endAngle: 90,
        center: ["50%", "75%"],
        size: "110%",
      });
    }

    if (state.settings.interaction_legend) {
      result.legend.enabled = true;
    }

    return result;
  }, [state.settings]);

  return (
    <HighchartsChart
      options={options}
      style={{ width: "100%", height: "400px" }}
    />
  );
};