import { useState } from "react";
import { Box, Grid } from "@mui/material";
import { Header } from "components/common/header";
import { Sidebar } from "components/auth/sidebar";
import { OnboardingOuterBox } from "components/onboarding";
import { AWS, AWSConnecting } from "./aws";
import Repo from "./repo";
import { apiCloudConnectionsList } from "api";

const moveToRepoSelectionIfHasCompleteConnections = (
  connections: any,
  changeStep: any,
  setConnections: any
) => {
  const completeConnections = connections?.results?.filter(
    ({ status }: any) => status === "COMPLETE"
  );

  if (completeConnections?.length) {
    changeStep(3);
  }

  // setConnections(connections);
};

const Onboarding = () => {
  const [currentStepNumber, setCurrentStepNumber] = useState(2);
  const [isRepoSelected, setIsRepoSelected] = useState(false);
  const [isAWSConnectionInitialized, setIsAWSConnectionInitialized] =
    useState(false);
  const [__connections, setConnections] = useState(null);

  const initializeAWSConnection = () => {
    setIsAWSConnectionInitialized(true);
  };
  const suspendAWSConnection = () => {
    setIsAWSConnectionInitialized(false);
    setCurrentStepNumber(2);
  };

  const changeStep = (stepNumber: number) => {
    if (stepNumber === 2 && isAWSConnectionInitialized) {
      setCurrentStepNumber(2.1);
      return;
    }
    setCurrentStepNumber(stepNumber);
  };

  const steps: any = {
    2: (
      <AWS
        changeStep={changeStep}
        initializeAWSConnection={initializeAWSConnection}
      />
    ),
    2.1: <AWSConnecting suspendAWSConnection={suspendAWSConnection} />,
    3: <Repo changeStep={changeStep} />,
  };

  apiCloudConnectionsList().then((connections) => {
    moveToRepoSelectionIfHasCompleteConnections(
      connections,
      changeStep,
      setConnections
    );
  });

  return (
    <Grid container spacing={0} direction="row" style={{ minHeight: "100%" }}>
      <Grid container flex={3} direction="column">
        <Header />
        <OnboardingOuterBox>{steps[currentStepNumber]}</OnboardingOuterBox>
      </Grid>
      <Sidebar
        changeStep={changeStep}
        currentStep={Math.floor(currentStepNumber)}
        isRepoSelected={isRepoSelected}
      />
    </Grid>
  );
};

export default Onboarding;