import * as React from "react";

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

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

import { Description } from "./layout";

import { Settings as Timeseries } from "./step_3_timeseries";
import { Settings as Pie } from "./step_3_pie";
import { Settings as Heatmap } from "./step_3_heatmap";
import { Settings as Spider } from "./step_3_spider";
import { Settings as Histogramm } from "./step_3_histogramm";
import { Settings as Hierarchy } from "./step_3_hierarchy";
import { Settings as Kpi } from "./step_3_kpi";
import { Settings as Table } from "./step_3_table";
import { Settings as Raw } from "./step_3_raw";

export const Step3: React.FC<StepProps> = ({ state, updateState }) => {
  const [t] = useTranslation(["opendash"]);

  switch (state.visualisation) {
    case VisualisationType.TIMESERIES:
      return <Timeseries state={state} updateState={updateState} />;

    case VisualisationType.PIE:
      return <Pie state={state} updateState={updateState} />;

    case VisualisationType.HEATMAP:
      return <Heatmap state={state} updateState={updateState} />;

    case VisualisationType.SPIDER:
      return <Spider state={state} updateState={updateState} />;

    case VisualisationType.HISTOGRAMM:
      return <Histogramm state={state} updateState={updateState} />;

    case VisualisationType.HIERARCHY:
      return <Hierarchy state={state} updateState={updateState} />;

    case VisualisationType.KPI:
      return <Kpi state={state} updateState={updateState} />;

    case VisualisationType.TABLE:
      return <Table state={state} updateState={updateState} />;

    case VisualisationType.RAW:
      return <Raw state={state} updateState={updateState} />;

    default:
      return <Description children={t("data_explorer.step_3_no_settings")} />;
  }
  return <span>3</span>;
};