import { ComponentType, useLayoutEffect } from 'react';
import { useMFEMetadataContext } from '../contexts/mfe-metadata-context';
import { WEB_COMPONENT_NAME } from '../globals';
import { MfeStyleRegistry } from './mfe-style-registry';

declare global {
    // eslint-disable-next-line @typescript-eslint/naming-convention
    var __mfeSelfHosted__: boolean | undefined;
}

/*
 * HOC wrapping the MFE's root component in register(). Adopts sheets from the registry into
 * the MFE's shadow roots. Only active in development; eliminated by Vite in production builds.
 */
export function withCssInjector<P extends object>(Component: ComponentType<P>): ComponentType<P> {
    if (process.env.NODE_ENV === 'production') {
        return Component;
    }

    return function CssInjectorWrapper(props: P) {
        const { shadowRoot, portalShadowRoot } = useMFEMetadataContext();

        useLayoutEffect(() => {
            const registry = MfeStyleRegistry.for(WEB_COMPONENT_NAME);
            const roots = [
                shadowRoot,
                portalShadowRoot,
                ...(globalThis.__mfeSelfHosted__ ? [document] : []),
            ];

            roots.forEach(root => registry.observeRoot(root));

            return () => {
                roots.forEach(root => registry.unobserveRoot(root));
            };
        }, [shadowRoot, portalShadowRoot]);

        return <Component {...props} />;
    };
}