import * as React from "react";

import { Typography } from "antd";
import { useTranslation } from "../..";

import { StepProps, VisualisationType } from "./types";

import { Select } from "./select";

export const Step2: React.FC<StepProps> = ({ state, updateState }) => {
  const [t] = useTranslation(["opendash"]);
  return (
    <React.Fragment>
      <Select
        value={state.visualisation}
        onChange={nextValue => {
          updateState(draft => {
            draft.visualisation = nextValue as VisualisationType;
            draft.settings = {};
          });
        }}
        options={[
          {
            label: "Zeit-Diagramm",
            icon: "area-chart",
            tooltip: null,
            value: VisualisationType.TIMESERIES,
            disabled: false,
          },
          {
            label: "Kuchen-Diagramm",
            icon: "pie-chart",
            tooltip: null,
            value: VisualisationType.PIE,
            disabled: false,
          },
          {
            label: "Heatmap-Diagramm",
            icon: "heat-map",
            tooltip: null,
            value: VisualisationType.HEATMAP,
            disabled: false,
          },
          {
            label: "Spider-Diagramm",
            icon: "radar-chart",
            tooltip: null,
            value: VisualisationType.SPIDER,
            disabled: false,
          },
          {
            label: "Histogramm",
            icon: "bar-chart",
            tooltip: null,
            value: VisualisationType.HISTOGRAMM,
            disabled: false,
          },
          {
            label: "Hierarchie-Diagramm",
            icon: "fork",
            tooltip: null,
            value: VisualisationType.HIERARCHY,
            disabled: true,
          },
          {
            label: "Kennzahl",
            icon: "number",
            tooltip: null,
            value: VisualisationType.KPI,
            disabled: false,
          },
          {
            label: "Tabelle",
            icon: "table",
            tooltip: null,
            value: VisualisationType.TABLE,
            disabled: false,
          },
          {
            label: "Rohdaten",
            icon: "build",
            tooltip: null,
            value: VisualisationType.RAW,
            disabled: false,
          },
        ]}
      />
    </React.Fragment>
  );
};