import * as React from "react";

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

import { StepProps } from "./types";

import { Select } from "./select";
import { Description } from "./layout";
import { Collapse, Checkbox } from "antd";

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

  React.useEffect(() => {
    if (Object.keys(state.settings).length === 0) {
      updateState(draft => {
        draft.settings.interaction_legend = true;
      });
    }
  }, [state?.settings]);

  return (
    <Collapse bordered={false} defaultActiveKey={["general"]}>
      <Collapse.Panel
        header={t("data_explorer.pie.general_options")}
        key="general"
      >
        <Description children={t("data_explorer.pie.style")} />

        <Select
          value={state.settings.style}
          size={3}
          onChange={nextValue => {
            updateState(draft => {
              draft.settings.style = nextValue;
            });
          }}
          options={[
            {
              label: t("data_explorer.pie.style_pie"),
              icon: "pie-chart",
              tooltip: null,
              value: "pie",
              disabled: false,
            },
            {
              label: t("data_explorer.pie.style_donut"),
              icon: "pie-chart",
              tooltip: null,
              value: "donut",
              disabled: false,
            },
            {
              label: t("data_explorer.pie.style_half_donut"),
              icon: "pie-chart",
              tooltip: null,
              value: "half_donut",
              disabled: false,
            },
          ]}
        />

        <Description children={t("data_explorer.pie.aggregation")} />

        <Select
          value={state.settings.aggregation}
          size={5}
          onChange={nextValue => {
            updateState(draft => {
              draft.settings.aggregation = nextValue;
            });
          }}
          options={[
            {
              label: t("data_explorer.pie.aggregation_sum"),
              icon: "pie-chart",
              tooltip: null,
              value: "sum",
              disabled: false,
            },
            {
              label: t("data_explorer.pie.aggregation_mean"),
              icon: "pie-chart",
              tooltip: null,
              value: "mean",
              disabled: false,
            },
            {
              label: t("data_explorer.pie.aggregation_max"),
              icon: "pie-chart",
              tooltip: null,
              value: "max",
              disabled: false,
            },
            {
              label: t("data_explorer.pie.aggregation_min"),
              icon: "pie-chart",
              tooltip: null,
              value: "min",
              disabled: false,
            },
            {
              label: t("data_explorer.pie.aggregation_count"),
              icon: "pie-chart",
              tooltip: null,
              value: "count",
              disabled: false,
            },
          ]}
        />
      </Collapse.Panel>
      <Collapse.Panel
        header={t("data_explorer.pie.interaction_options")}
        key="interaction"
      >
        <div style={{ marginBottom: 24 }}>
          <Checkbox
            children={t("data_explorer.pie.interaction_legend")}
            checked={state.settings.interaction_legend}
            onChange={event => {
              const value = event.target.checked;
              updateState(
                draft => void (draft.settings.interaction_legend = value)
              );
            }}
          />
        </div>
        <Description
          children={t(
            "opendash.data_explorer.pie.interaction_options_description"
          )}
        />
      </Collapse.Panel>
    </Collapse>
  );
};