import useAppSelector from "@insite/client-framework/Common/Hooks/useAppSelector";
import translate from "@insite/client-framework/Translate";
import { useToaster } from "@insite/mobius/Toast/ToasterContext";
import { FC, useEffect } from "react";

const DevelopmentMessage: FC = () => {
    if (IS_PRODUCTION) {
        return null;
    }

    const serverSideRenderingCount = useAppSelector(state => state.context.serverSideRenderingCount);
    const toaster = useToaster();
    useEffect(() => {
        if (serverSideRenderingCount) {
            toaster.addToast({
                body: translate(
                    `This page required ${serverSideRenderingCount} iterations to fully render on the server. This could have negative performance implications. Review the Node.js server logs for more information on where this render loop occurred.`,
                ),
                messageType: "warning",
                timeoutLength: 20000,
            });
        }
    }, [serverSideRenderingCount]);

    return null;
};

export default DevelopmentMessage;
