Signup Form

import { SignUpProps } from '@interfaces/index';
import styled from 'styled-components';
import { CompanyDataStep, InviteUsersStep, PersonalDataStep, SyncEcommerceStep } from './formStep';
import Step from './step';

const StyledFormContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  margin: 0 auto;
  gap: 30px;
`;

const SignupForm = ({ steps, setStep }: SignUpProps) => {
  const activeStep = JSON.stringify(Object.keys(steps).find(key => steps[key].status === 'active'));

  const handleNextStep = () => {
    const keys = Object.keys(steps);
    const updatedSteps = { ...steps };
    let activeStepIndex = -1;

    for (let i = 0; i < keys.length; i++) {
      if (steps[keys[i]].status === 'active') {
        updatedSteps[keys[i]] = { ...steps[keys[i]], status: 'completed' };
        activeStepIndex = i;
        break;
      }
    }

    const nextStepIndex = activeStepIndex + 1;
    if (nextStepIndex < keys.length) {
      updatedSteps[keys[nextStepIndex]] = { ...steps[keys[nextStepIndex]], status: 'active' };
    }

    setStep(updatedSteps);
  };

  const handlePrevStep = () => {
    const keys = Object.keys(steps);
    const updatedSteps = { ...steps };
    let activeStepIndex = -1;

    for (let i = 0; i < keys.length; i++) {
      if (steps[keys[i]].status === 'active') {
        updatedSteps[keys[i]] = { ...steps[keys[i]], status: 'inactive' };
        activeStepIndex = i;
        break;
      }
    }

    const prevStepIndex = activeStepIndex - 1;
    if (prevStepIndex >= 0) {
      updatedSteps[keys[prevStepIndex]] = { ...steps[keys[prevStepIndex]], status: 'active' };
    }

    setStep(updatedSteps);
  };

  const handleSkipStep = () => {
    const keys = Object.keys(steps);
    const updatedSteps = { ...steps };
    let activeStepIndex = -1;

    for (let i = 0; i < keys.length; i++) {
      if (steps[keys[i]].status === 'active') {
        updatedSteps[keys[i]] = { ...steps[keys[i]], status: 'skipped' };
        activeStepIndex = i;
        break;
      }
    }

    const nextStepIndex = activeStepIndex + 1;
    if (nextStepIndex < keys.length) {
      updatedSteps[keys[nextStepIndex]] = { ...steps[keys[nextStepIndex]], status: 'active' };
    }

    setStep(updatedSteps);
  };

  const renderStep = (step: string) => {
    switch (step) {
      case 'step1':
        return (
          <Step showNext handleNextStep={handleNextStep}>
            <PersonalDataStep />
          </Step>
        );
      case 'step2':
        return (
          <Step showNext showPrev handleNextStep={handleNextStep} handlePrevStep={handlePrevStep}>
            <CompanyDataStep />
          </Step>
        );
      case 'step3':
        return (
          <Step
            showNext
            showPrev
            showSkip
            handleNextStep={handleNextStep}
            handlePrevStep={handlePrevStep}
            handleSkipStep={handleSkipStep}>
            <SyncEcommerceStep />
          </Step>
        );
      case 'step4':
        return (
          <Step
            showNext
            showPrev
            showSkip
            handleNextStep={handleNextStep}
            handlePrevStep={handlePrevStep}
            handleSkipStep={handleSkipStep}>
            <InviteUsersStep />
          </Step>
        );
      default:
        return null;
    }
  };
  return <StyledFormContainer>{renderStep(activeStep && JSON.parse(activeStep))}</StyledFormContainer>;
};

export default SignupForm;