import React, { useEffect, useMemo, lazy, Suspense } from 'react';
import { Container, AdaptableCard } from '@/components/shared';
import FormStep from './components/FormStep';
import { useDispatch, useSelector } from 'react-redux';
import { setStepStatus, setFormData } from './store/dataSlice';
import { setCurrentStep } from './store/stateSlice';
import reducer from './store';
import { injectReducer } from '@/store/index';
import SmallSide from '@/components/layout/AuthLayout/SmallSide';

injectReducer('accountDetailForm', reducer);

const CompanyRegistrationInfo = lazy(() => import('./components/CompanyRegistrationInfo'));
const UserInformation = lazy(() => import('./components/UserInformation'));
const AccountReview = lazy(() => import('./components/AccountReview'));
const VeriticationOtp = lazy(() => import('./components/VerificationOTP'));
const NewPassword = lazy(() => import('./components/NewPassword'));

const DetailForm = () => {
  const dispatch = useDispatch();
  const stepStatus = useSelector((state) => state.accountDetailForm.data.stepStatus);
  const currentStep = useSelector((state) => state.accountDetailForm.state.currentStep);
  const formData = useSelector((state) => state.accountDetailForm.data.formData);
  useEffect(() => {
    //dispatch(getForm());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleNextChange = (values, name) => {
    const nextStep = currentStep + 1;
    dispatch(setFormData({ [name]: values }));
    dispatch(
      setStepStatus({
        [currentStep]: { status: 'complete' },
        [nextStep]: { status: 'current' },
      }),
    );
    dispatch(setCurrentStep(nextStep));
  };

  const handleBackChange = () => {
    const previousStep = currentStep - 1;
    dispatch(setCurrentStep(previousStep));
  };

  const currentStepStatus = useMemo(() => stepStatus[currentStep].status, [stepStatus, currentStep]);

  return (
    <SmallSide>
      <Container className="h-full w-full" id="continer">
        <AdaptableCard className="mt-4" bodyClass="h-full">
          <div className="">
            <div className={currentStep !== 4 ? '' : 'lg:col-span-5'}>
              {currentStep !== 4 && (
                <div className="">
                  <FormStep currentStep={currentStep} currentStepStatus={currentStepStatus} stepStatus={stepStatus} />
                </div>
              )}
              <Suspense fallback={<></>}>
                {currentStep === 0 && (
                  <CompanyRegistrationInfo
                    data={formData.CompanyRegistrationInfo}
                    onNextChange={handleNextChange}
                    currentStepStatus={currentStepStatus}
                  />
                )}
                {currentStep === 1 && (
                  <UserInformation
                    data={formData.UserInformation}
                    onNextChange={handleNextChange}
                    onBackChange={handleBackChange}
                    currentStepStatus={currentStepStatus}
                  />
                )}
                {currentStep === 2 && (
                  <VeriticationOtp
                    data={formData.VeriticationOtp}
                    onNextChange={handleNextChange}
                    onBackChange={handleBackChange}
                    currentStepStatus={currentStepStatus}
                  />
                )}
                {currentStep === 3 && (
                  <NewPassword
                    data={formData.NewPassword}
                    onNextChange={handleNextChange}
                    onBackChange={handleBackChange}
                    currentStepStatus={currentStepStatus}
                  />
                )}

                {currentStep === 4 && <AccountReview />}
              </Suspense>
            </div>
          </div>
        </AdaptableCard>
      </Container>
    </SmallSide>
  );
};

export default DetailForm;
