const handleNext = async (
    step: number,
    stepName?: any,
    completed?: boolean,
  ) => {
    console.log('STEPNUMBER', step);
    console.log('COMPLETED', completed);
    window.scrollTo(0, 0);
    setCurrentSelectedStep(step);
    // Revert Active Service Funtionalities back to initial state on first handleNext Step
    dispatch(setIsChangeService(false));
    // dispatch(setIsCompleteWillInfo(false));
    dispatch(setModifyAppointment(false));
    // dispatch(setIsUpgradeWill(false));
    dispatch(setIsModifyWill(false));

    // Set upgradeWill flag to false if next clicked from Personal Details
    if (stepName === 'personal') {
      dispatch(setIsUpgradeWill(false));
    }

    // Show selection option in Real Estate Distribution for Property Will up on next from beneficiary Details
    if (step === 5) {
      dispatch(clearSelectedDistribution());
    }

    // If quick booking is enabled
    if (isQuickBooking && stepName !== 'willTypeSelection') {
      setActiveStep(8);
      if (stepName === 'bookAppointment') {
        setActiveStep((prev) => prev + 1);
      }
    } else if (!isQuickBooking && stepName !== 'willTypeSelection') {
      // setActiveStep(3);
    }

    if (stepName === 'personal' && isQuickBooking) {
      setShowSkipToAppointmentModal(true);
    }

    // If upload documents is active and Book appointment is visible
    if (stepName === 'upload' && !isShowBookAppointment) {
      // Incomplete steps API called here
      try {
        const response = await trackPromise(
          api.validateWillSteps(
            profileGuid,
            spouseGuid,
            isSpouseSelected ? spouseGuid : profileGuid,
            serviceId,
          ),
        );
        // Save incomplete steps list in store (redux)
        dispatch(getIncompleteSteps(response?.data?.Output));
        const incompletedSteps = response?.data?.Output;
        const testatorIncompleteSteps = incompletedSteps.filter((step:any) => step.bookedForProfileGuid === profileGuid);
        const spouseIncompleteSteps = incompletedSteps.filter((step:any) => step.bookedForProfileGuid === spouseGuid);
        console.log('testatorIncompleteSteps', testatorIncompleteSteps);
        console.log('spouseIncompleteSteps', spouseIncompleteSteps);

        // Mirror Will && Testator
        if (mirrorWillCheck && !isSpouseSelected) {
          if (testatorIncompleteSteps.length !== 0) {
            handleShowIncompleteStepsModal();
          } else {
            // alert('go to next step');
            dispatch(setHighlightedSteps(9));
            dispatch(setNavigationIndex(9));
            dispatch(getNewActiveStep(13));
          }
        } else if (mirrorWillCheck && isSpouseSelected) { // Mirror Will && Spouse
          if (spouseIncompleteSteps.length !== 0) {
            handleShowIncompleteStepsModal();
          } else {
            dispatch(setHighlightedSteps(9));
            dispatch(setNavigationIndex(9));
            dispatch(getNewActiveStep(13));
          }
        }

        if (singleWillCheck) {
          // Show incomplete steps Modal only if the response is not empty
          if (incompletedSteps.length !== 0) {
            handleShowIncompleteStepsModal();
          } else {
          // Ask for confirmation on this functionality
            setIsShowBookAppointment(true);
            // Set View component, highlighted step in stepper and icon
            dispatch(setHighlightedSteps(9));
            dispatch(setNavigationIndex(9));
            dispatch(getNewActiveStep(21));
            setNewCompletedSteps((prev: any) => [...prev, 3, 4, 5, 6, 7, 8]);
          // dispatch(storeActiveStep(9));
          }
        }
      } catch (error) {
        console.log(error);
      }
    } else if (stepName === 'beneficiary-details' && willTypeID !== 1) {
      // Not needed for Full Will
      // If property and beneficiray is added then only we can navigate or go next to Real Estate Distribution
      if (propertyAdded && beneficiaryAdded) {
        dispatch(setHighlightedSteps(6));
        dispatch(getNewActiveStep(getStepIDFromBeneficiaryStep(willTypeID)));
        dispatch(setNavigationIndex(null));
        // // Highlighted step handled here
        // dispatch(setHighlightedSteps(step + 1));
        // // Set Current step number
        // dispatch(disableNavigation());
        // setCurrentSelectedStep(step);
        // // getWillStep(step);
        // const nextIndex = (currentIndex + 1) % stepNumber.length;
        // setCurrentIndex(nextIndex);

        // // setActiveStep((prevActiveStep) => prevActiveStep + 1);
        // // Need more testing here
        // setCurrentBtnStep(step + 1);
        // setActiveStep((prevActiveStep) => prevActiveStep + 1);
        // dispatch(storeActiveStep(step));
        // dispatch(getNewActiveStep(0));
        // dispatch(setNavigationIndex(null));
      } else {
        await dispatch<any>(resetErrorState());
        await dispatch<any>(setErrorInfo(`Please complete Beneficiary Details and ${getThirdStepName(willTypeID)}`));
      }
    } else {
      // ----------------------------------------------------------------
      // Highlighted step handled here
      // dispatch(setHighlightedSteps(step + 1));
      // // Test case
      // // getWillStep(step);
      // dispatch(disableNavigation());
      // const nextIndex = (currentIndex + 1) % stepNumber.length;
      // setCurrentIndex(nextIndex);
      // // dispatch(storeActiveStep(activeStep + 1));

      // // Get stepNumber list from the stepList array
      // const stepNumberList: any = results?.map((res) => Number(res?.stepNumber));

      // // // Handling ICONS navigation in handleNext()
      // if (step === 3) {
      //   setIconNum1(3);
      //   setIconNum2(6);
      // } else if (step === 6) {
      //   setIconNum1(6);
      //   setIconNum2(9);
      // } else if (step === 9) {
      //   if (willTypeID === 2) {
      //     // Guardianship Will
      //     setIconNum1(7);
      //     setIconNum2(10);
      //   } else {
      //     setIconNum1(8);
      //     setIconNum2(11);
      //   }
      // } else if (step > stepNumberList[stepNumberList.length - 2]) {
      //   // setIconNum1(8);
      //   // setIconNum2(11);
      //   navigate('/wills');
      // }

      // // Handle distribution of shares/Real estate distribution in ICONS
      // if (step === 7) {
      //   setIconNum1(6);
      //   setIconNum2(9);
      // }

      // // Set current step to pass as a prop to the further components to use
      // //  the handleNext method in those respective components
      // // NB:increment the step number by 1 to get correct list of completed steps
      // setCurrentBtnStep(step + 1);

      // let newSkipped = skipped;
      // if (isStepSkipped(activeStep)) {
      //   newSkipped = new Set(newSkipped.values());
      //   newSkipped.delete(activeStep);
      // }
      // // Increment activestep from state
      // setActiveStep((prevActiveStep) => prevActiveStep + 1);
      // // Increment currentStep from store state
      // dispatch(storeActiveStep(step));
      // dispatch(setStepFlow());
      // setSkipped(newSkipped);
      // dispatch(getNewActiveStep(0));
      // dispatch(setNavigationIndex(null));

      // if (navigationEnabled) {
      //   setNewCompletedSteps((prevSteps: any) => [
      //     ...prevSteps,
      //     completed ? navigationIndex : null,
      //   ]);
      //   dispatch(setCompletedStepList(completed ? navigationIndex : null));
      //   dispatch(storeActiveStep(navigationIndex));
      //   setActiveStep(navigationIndex);
      // } else {
      //   setNewCompletedSteps((prevStep: any) => [
      //     ...prevStep,
      //     completed ? step : null,
      //   ]);
      //   dispatch(setCompletedStepList(completed ? step : null));
      //   // setNewCompletedSteps((prevStep: any) => [...prevStep,step]);
      // }

      // ----------------------------------------------------------------

      // Stepper/Next Optimisations
      dispatch(setHighlightedSteps(step + 1));
      dispatch(storeActiveStep(step));
      dispatch(getNewActiveStep(0));
      dispatch(setNavigationIndex(step + 1));
      // dispatch(setNavigationIndex(null));

      setNewCompletedSteps((prev:any) => [...prev,completed ? step : null]);
    }
  };