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

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

import { VisualisationProps } from "./types";

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

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

  const series = React.useMemo(() => {
    return state.items.map(([source, id, dimension]) => {
      const item = items[id];
      const valueType = item.valueTypes[dimension];
      const unit = units[valueType.name + valueType.unit];

      return {
        name: `${item.name} (${valueType.name})`,
        color: stringToColor(item.id),
        type: state.settings.style,
        yAxis: state.settings.yaxis_auto
          ? Object.values(units).indexOf(unit)
          : 0,
        data: data[id].map(x => [x.date, x.value[dimension]]),
      };
    });
  }, [state, data]);

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

      chart: {
        zoomType: null,
      },

      xAxis: {
        title: {
          text: state.settings.xaxis_label,
        },

        type: "datetime",
      },

      yAxis: {
        title: {
          text: state.settings.yaxis_label,
        },
        labels: {
          format: "{value}",
        },
      },

      legend: {
        enabled: false,
      },

      plotOptions: {
        series: {
          enableMouseTracking: false,
        },
      },

      series,
    };

    if (state.settings.yaxis_auto) {
      result.yAxis = Object.values(units).map(unit => ({
        title: {
          text: `${unit.name} (${unit.unit})`,
        },
        labels: {
          format: "{value}" + unit.unit,
        },
      }));
    }

    if (state.settings.interaction_zoom_x) {
      result.chart.zoomType = "x";
    }

    if (state.settings.interaction_zoom_y) {
      result.chart.zoomType = "y";
    }

    if (
      state.settings.interaction_zoom_x &&
      state.settings.interaction_zoom_y
    ) {
      result.chart.zoomType = "xy";
    }

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

    if (state.settings.interaction_tooltips) {
      result.plotOptions.series.enableMouseTracking = true;
    }

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

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