import * as Anvil1 from '@servicetitan/design-system';
import { FC, PropsWithChildren, useCallback } from 'react';

export const Anvil1Providers: FC<{ root: ShadowRoot; portal: ShadowRoot } & PropsWithChildren> = ({
    root,
    portal,
    children,
}) => {
    const getTablePopupProps = useCallback(
        (props: object) => ({
            ...props,
            appendTo: root as unknown as HTMLElement,
        }),
        [root]
    );

    if (Anvil1.DefaultPortalContext === undefined || Anvil1.TablePopupPropsContext === undefined) {
        return children;
    }

    return (
        <Anvil1.DefaultPortalContext.Provider value={portal as unknown as HTMLElement}>
            <Anvil1.TablePopupPropsContext.Provider value={getTablePopupProps}>
                {children}
            </Anvil1.TablePopupPropsContext.Provider>
        </Anvil1.DefaultPortalContext.Provider>
    );
};