import React, { FC } from "react";
import DashboardHomeIntro from "./DashboardHomeIntro";
import DashboardFormInit from "./DashboardFormInit";
import DashboardHomeDetail from "./home/DashboardHomeDetail";
import DashboardHomeEmploymentInfo from "./home/DashboardHomeEmploymentInfo";
import DashboardHomeRefereeInfo from "./home/DashboardHomeRefereeInfo";
import DashboardHomeAttestation from "./home/DashboardHomeAttestation";

interface DashboardHomeProps {}

const DashboardHome: FC<DashboardHomeProps> = () => {
  const [step, setStep] = React.useState(1);
  const [applicationDetails, setApplicationDetails] = React.useState({});

  const handleNextStep = (values:{}={}) => {
    if (step < 7) {
      setStep(step + 1);
    }
    setApplicationDetails((prev:{}) => ({...prev, ...values}))
    }

  return (
    <div className="w-full">
      {step === 1 && <DashboardHomeIntro step={step} handleNextStep={handleNextStep} />}
      {step === 2 && <DashboardFormInit handleNextStep={handleNextStep} />}
      {step === 3 && <DashboardHomeDetail handleNextStep={handleNextStep} />}
      {step === 4 && <DashboardHomeEmploymentInfo handleNextStep={handleNextStep} />}
      {step === 5 && <DashboardHomeRefereeInfo handleNextStep={handleNextStep} />}
      {step === 6 && <DashboardHomeAttestation handleNextStep={handleNextStep} applicationDetails={applicationDetails} />}
      {step === 7 && <DashboardHomeIntro step={step} handleNextStep={handleNextStep} />}
      {/* <DashboardHomeAttestation handleNextStep={handleNextStep} applicationDetails={applicationDetails} /> */}
    </div>
  );
};

export default DashboardHome;
