import * as React from "react";

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

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

import { Select } from "./select";
import { Description } from "./layout";

export const Settings: React.FC<StepProps> = ({ state, updateState }) => {
  const [t] = useTranslation(["opendash"]);
  return (
    <React.Fragment>
      <Description children={t("data_explorer.step_3_raw_format")} />
      <Select
        value={state.settings.format}
        size={4}
        onChange={nextValue => {
          updateState(draft => {
            draft.settings.format = nextValue;
          });
        }}
        options={[
          {
            label: t("data_explorer.step_3_raw_json"),
            icon: "file",
            tooltip: null,
            value: "json",
            disabled: false,
          },
          {
            label: t("data_explorer.step_3_raw_yaml"),
            icon: "file",
            tooltip: t("data_explorer.visualisation_coming_soon"),
            value: "yaml",
            disabled: true,
          },
          {
            label: t("data_explorer.step_3_raw_csv"),
            icon: "file",
            tooltip: t("data_explorer.visualisation_coming_soon"),
            value: "csv",
            disabled: true,
          },
          {
            label: t("data_explorer.step_3_raw_xml"),
            icon: "file",
            tooltip: t("data_explorer.visualisation_coming_soon"),
            value: "xml",
            disabled: true,
          },
        ]}
      />
    </React.Fragment>
  );
};