import {StepObject} from "@givewp/forms/app/form/MultiStepForm/types";
import {useDonationFormMultiStepState} from "@givewp/forms/app/form/MultiStepForm/store";
import usePrevious from "@givewp/forms/app/form/MultiStepForm/hooks/usePreviousValue";
import classNames from "classnames";
import StepsWrapper from "@givewp/forms/app/form/MultiStepForm/components/StepsWrapper";

/**
 * @since 3.0.0
 *
 * This loops through the steps and lazy loads them using a waterfall approach.
 * Only current and previous steps are rendered.  Obviously all previous steps are hidden.
 * This is necessary so the next step is always updated with the form values.
 * The other reason is so gateway scripts remain loaded on the page and are not removed by unmounting the step.
 */
export default function Steps({steps}: { steps: StepObject[] }) {
    const {currentStep} = useDonationFormMultiStepState();
    const previousStep = usePrevious(currentStep);

    const stepElements = steps?.map(({id, element}) => {
        const shouldRenderElement = currentStep >= id;
        const isFirstStep = id === 0;
        const isCurrentStep = id === currentStep;
        const ascending = currentStep > previousStep;
        const descending = currentStep < previousStep;

        const stepClasses = classNames('givewp-donation-form__step', {
            'givewp-donation-form__step--start': isFirstStep,
            'givewp-donation-form__step--visible': isCurrentStep,
            'givewp-donation-form__step--hidden': !isCurrentStep,
            'givewp-donation-form__step--ascending': isCurrentStep && ascending,
            'givewp-donation-form__step--descending': isCurrentStep && descending,
        });

        return (
            <div key={id} id={`givewp-donation-form-step-${id}`} className={stepClasses}>
                {shouldRenderElement && element}
            </div>
        );
    });

    return <StepsWrapper>{stepElements}</StepsWrapper>
}
