import * as React from "react";
import { Steps, Tabs, Divider, Button } from "antd";
import { useImmerState, useTranslation, Boundary } from "../..";

import {
  Container,
  StepNav,
  ButtonNav,
  SettingsHolder,
  PreviewHolder,
  Description,
} from "./layout";

import { StateInterface, VisualisationType } from "./types";
import { Step0 } from "./step_0";
import { Step1 } from "./step_1";
import { Step2 } from "./step_2";
import { Step3 } from "./step_3";
import { Visualisation } from "./visualisation";

interface Props {
  style?: React.CSSProperties;
}

export const DataExplorer: React.FC<Props> = ({}) => {
  const [t] = useTranslation(["opendash"]);
  const [step, setStep] = React.useState(0);
  const firstRun = React.useRef(true);

  const [state, updateState] = useImmerState<StateInterface>({
    items: [
      ["demo@video.de", "demo.video.energieleistunga", 0],
      ["demo@video.de", "demo.video.energieverbrauchb", 0],
    ],
    time: {
      start: Date.now() - 1000 * 60 * 60 * 1,
      end: Date.now(),
      live: true,
    },
    visualisation: VisualisationType.TIMESERIES,
    settings: {},
  });

  React.useEffect(() => {
    if (Object.keys(state.settings).length === 0) {
      if (state?.visualisation === VisualisationType.TIMESERIES) {
        updateState(draft => {
          draft.settings.interaction_legend = true;
          draft.settings.interaction_tooltips = true;
          draft.settings.interaction_zoom_x = true;
          draft.settings.yaxis_auto = true;
        });
      }
    }

    if (firstRun.current) {
      return void (firstRun.current = false);
    }

    const timeout = setTimeout(() => {
      setStep(3);
    }, 1000);

    return () => {
      clearTimeout(timeout);
    };
  }, [state?.visualisation]);

  const errorKey = React.useMemo(() => "" + Math.random(), [state?.items]);

  const showPreview = !(step === 0 || step === 1);

  return (
    // <Modal visible width={1000}>
    <Container>
      <StepNav>
        <Steps current={step} onChange={setStep}>
          <Steps.Step
            title={t("data_explorer.step_0_title")}
            subTitle={t("data_explorer.step_0_subtitle", {
              count: state.items.length,
            })}
            status={
              step !== 0 && state.items.length === 0 ? "error" : undefined
            }
          />
          <Steps.Step
            title={t("data_explorer.step_1_title")}
            subTitle={t("data_explorer.step_1_subtitle")}
          />
          <Steps.Step
            title={t("data_explorer.step_2_title")}
            subTitle={t("data_explorer.step_2_subtitle")}
          />
          <Steps.Step
            title={t("data_explorer.step_3_title")}
            subTitle={t("data_explorer.step_3_subtitle")}
          />
        </Steps>
      </StepNav>

      <Divider></Divider>

      <SettingsHolder>
        <Tabs
          activeKey={step.toString()}
          renderTabBar={() => <React.Fragment />}
        >
          <Tabs.TabPane tab={t("data_explorer.step_0_title")} key="0">
            <Description children={t("data_explorer.step_0_description")} />
            <Step0 state={state} updateState={updateState} />
          </Tabs.TabPane>
          <Tabs.TabPane tab={t("data_explorer.step_1_title")} key="1">
            <Description children={t("data_explorer.step_1_description")} />
            <Step1 state={state} updateState={updateState} />
          </Tabs.TabPane>
          <Tabs.TabPane tab={t("data_explorer.step_2_title")} key="2">
            <Description children={t("data_explorer.step_2_description")} />
            <Step2 state={state} updateState={updateState} />
          </Tabs.TabPane>
          <Tabs.TabPane tab={t("data_explorer.step_3_title")} key="3">
            <Step3 state={state} updateState={updateState} />
          </Tabs.TabPane>
        </Tabs>
      </SettingsHolder>

      <ButtonNav>
        <Button
          type="default"
          disabled={step <= 0}
          onClick={e => setStep(step - 1)}
          children="Previous" // {t("data_explorer.step_3_title")}
        />
        <Button
          type="primary"
          disabled={step >= 3}
          onClick={e => setStep(step + 1)}
          style={{ float: "right" }}
          children="Next" // {t("data_explorer.step_3_title")}
        />
      </ButtonNav>

      <Divider></Divider>

      {/* <PreviewHolder>
        <pre>{JSON.stringify(state, null, 2)}</pre>
      </PreviewHolder>

      <Divider></Divider> */}

      {showPreview && (
        <PreviewHolder>
          <Boundary key={errorKey}>
            <Visualisation state={state} />
          </Boundary>
        </PreviewHolder>
      )}
    </Container>
    // </Modal>
  );
};