Untitled

import React, { useCallback } from "react";

import { IdDefinitions, useRegisterClickstreamDefinition } from "@libs/shared/clickstream-provider";

import { ProcessContext } from "../../types";
import { useProcessContext, useProcessContextUpdater } from "../../use-process-context";

export interface StepProps {
    name?: string;
    clickstreamIds?: IdDefinitions;
}

const useRegisterProcessStep = () => {
    const { registerClickstreamDefinition } = useRegisterClickstreamDefinition();

    const registerProcessStep = useCallback(
        (clickstreamIds: IdDefinitions, name: string) => {
            registerClickstreamDefinition(clickstreamIds, "todo");
        },
        [registerClickstreamDefinition],
    );

    return {
        registerProcessStep,
    };
};

export const Step = ({ children, name, clickstreamIds }: React.PropsWithChildren<StepProps>) => {
    const stepNameList = useProcessContext((context) => context.stepNameList);
    const { registerProcessStep } = useRegisterProcessStep();

    const setContext = useProcessContextUpdater();

    React.useEffect(() => {
        if (!stepNameList.length) {
            setContext((prevContext: ProcessContext) => {
                const stepNameListUpdated = [...prevContext.stepNameList, name];
                const stepName = stepNameListUpdated[prevContext.step - 1];
                return { ...prevContext, stepName, stepNameList: stepNameListUpdated };
            });
            if (clickstreamIds) {
                console.log(stepNameList.length, name);
                registerProcessStep(clickstreamIds, name);
            }
        }
    }, [stepNameList.length, setContext, name, clickstreamIds, registerProcessStep]);

    if (!stepNameList.length) {
        return null;
    }

    return children as React.ReactElement;
};