import * as React from "react";
import { Alert, Spin } from "antd";

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

import { VisualisationType, StateInterface } from "./types";
import { Description } from "./layout";
import { useData, useItems } from "./helper";

import { Visualisation as Timeseries } from "./visualisation_timeseries";
import { Visualisation as Pie } from "./visualisation_pie";
import { Visualisation as Heatmap } from "./visualisation_heatmap";
import { Visualisation as Spider } from "./visualisation_spider";
import { Visualisation as Histogramm } from "./visualisation_histogramm";
import { Visualisation as Hierarchy } from "./visualisation_hierarchy";
import { Visualisation as Kpi } from "./visualisation_kpi";
import { Visualisation as Table } from "./visualisation_table";
import { Visualisation as Raw } from "./visualisation_raw";

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

  const items = useItems(state);
  const [hasError, data] = useData(state);

  if (state.items.length === 0) {
    return (
      <Alert
        type="error"
        message={t("data_explorer.visualisation_data_missing")}
        style={{ textAlign: "center" }}
      />
    );
  }

  if (Object.keys(state.time).length === 0) {
    return (
      <Alert
        type="error"
        message={t("data_explorer.visualisation_time_missing")}
        style={{ textAlign: "center" }}
      />
    );
  }

  if (hasError) {
    return (
      <Alert
        type="error"
        message={t("data_explorer.visualisation_data_error")}
        style={{ textAlign: "center" }}
      />
    );
  }

  if (!data) {
    return (
      <div style={{ textAlign: "center", padding: 24 }}>
        <Spin tip={t("data_explorer.visualisation_data_loading")} />
      </div>
    );
  }

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

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

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

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

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

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

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

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

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

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