import * as React from "react";

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

import { StepProps } from "./types";

import { Select } from "./select";
import { Description } from "./layout";
import { Form } from "@ant-design/compatible";
import "@ant-design/compatible/assets/index.css";
import { Collapse, Input, Checkbox } from "antd";

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

  return (
    <React.Fragment>
      <Collapse bordered={false} defaultActiveKey={["general"]}>
        <Collapse.Panel
          header={t("data_explorer.timeseries.general_options")}
          key="general"
        >
          <Description children={t("data_explorer.timeseries.style")} />
          <Select
            value={state.settings.style}
            size={4}
            onChange={nextValue => {
              updateState(draft => {
                draft.settings.style = nextValue;
              });
            }}
            options={[
              {
                label: t("data_explorer.timeseries.style_line"),
                icon: "line-chart",
                tooltip: null,
                value: "line",
                disabled: false,
              },
              {
                label: t("data_explorer.timeseries.style_area"),
                icon: "area-chart",
                tooltip: null,
                value: "area",
                disabled: false,
              },
              {
                label: t("data_explorer.timeseries.style_scatter"),
                icon: "dot-chart",
                tooltip: null,
                value: "scatter",
                disabled: false,
              },
              {
                label: t("data_explorer.timeseries.style_bar"),
                icon: "bar-chart",
                tooltip: null,
                value: "bar",
                disabled: false,
              },
            ]}
          />
        </Collapse.Panel>
        <Collapse.Panel
          header={t("data_explorer.timeseries.interaction_options")}
          key="interaction"
        >
          <div style={{ marginBottom: 24 }}>
            <Checkbox
              children={t(
                "opendash.data_explorer.timeseries.interaction_legend"
              )}
              checked={state.settings.interaction_legend}
              onChange={event => {
                const value = event.target.checked;
                updateState(
                  draft => void (draft.settings.interaction_legend = value)
                );
              }}
            />
          </div>
          <div style={{ marginBottom: 24 }}>
            <Checkbox
              children={t(
                "opendash.data_explorer.timeseries.interaction_tooltips"
              )}
              checked={state.settings.interaction_tooltips}
              onChange={event => {
                const value = event.target.checked;
                updateState(
                  draft => void (draft.settings.interaction_tooltips = value)
                );
              }}
            />
          </div>
          <div style={{ marginBottom: 24 }}>
            <Checkbox
              children={t(
                "opendash.data_explorer.timeseries.interaction_zoom_x"
              )}
              checked={state.settings.interaction_zoom_x}
              onChange={event => {
                const value = event.target.checked;
                updateState(
                  draft => void (draft.settings.interaction_zoom_x = value)
                );
              }}
            />
          </div>
          <div style={{ marginBottom: 24 }}>
            <Checkbox
              children={t(
                "opendash.data_explorer.timeseries.interaction_zoom_y"
              )}
              checked={state.settings.interaction_zoom_y}
              onChange={event => {
                const value = event.target.checked;
                updateState(
                  draft => void (draft.settings.interaction_zoom_y = value)
                );
              }}
            />
          </div>
          <div style={{ marginBottom: 24 }}>
            <Checkbox
              children={t(
                "opendash.data_explorer.timeseries.interaction_minimap"
              )}
              checked={state.settings.interaction_minimap}
              onChange={event => {
                const value = event.target.checked;
                updateState(
                  draft => void (draft.settings.interaction_minimap = value)
                );
              }}
            />
          </div>
          <Description
            children={t(
              "opendash.data_explorer.timeseries.interaction_options_description"
            )}
          />
        </Collapse.Panel>
        <Collapse.Panel
          header={t("data_explorer.timeseries.axis_options")}
          key="axis"
        >
          <div style={{ marginBottom: 24 }}>
            <Checkbox
              children={t("data_explorer.timeseries.yaxis_auto")}
              checked={state.settings.yaxis_auto}
              onChange={event => {
                const value = event.target.checked;
                updateState(draft => void (draft.settings.yaxis_auto = value));
              }}
            />
          </div>

          <div style={{ marginBottom: 24 }}>
            <Input
              style={{ width: "calc(50% - 12px)", marginRight: 24 }}
              placeholder={t("data_explorer.timeseries.xaxis_label")}
              value={state.settings.xaxis_label}
              onChange={event => {
                const value = event.target.value;
                updateState(draft => void (draft.settings.xaxis_label = value));
              }}
            />
            <Input
              style={{ width: "calc(50% - 12px)" }}
              placeholder={t("data_explorer.timeseries.yaxis_label")}
              value={state.settings.yaxis_label}
              disabled={state.settings.yaxis_auto}
              onChange={event => {
                const value = event.target.value;
                updateState(draft => void (draft.settings.yaxis_label = value));
              }}
            />
          </div>
          <Description
            children={t(
              "opendash.data_explorer.timeseries.axis_options_description"
            )}
          />
        </Collapse.Panel>
      </Collapse>
    </React.Fragment>
  );
};