import * as React from "react";

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

import { VisualisationProps } from "./types";
import { Description } from "./layout";

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

  if (state.settings.format !== "json") {
    return (
      <Description children={t("data_explorer.visualisation_coming_soon")} />
    );
  }

  return (
    <pre style={{ height: 500, overflowY: "scroll" }}>
      {JSON.stringify(data, null, 2)}
    </pre>
  );
};