import { memo, useState, useEffect } from "react";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ModalRendererProps, ModalRootProps } from "../types";

/**
 * Memoized component for rendering modal content.
 * @param component The modal component to render.
 * @param rest Additional props to pass to the modal component.
 * @returns JSX element representing the modal.
 */
const ModalRenderer = memo(({ component, ...rest }: ModalRendererProps) =>
    component(rest)
);

/**
 * Memoized component for rendering modals within a modal root.
 * @param modals An object containing modal components to render.
 * @param container The DOM element to render modals into.
 * @param RootComponent The root component to wrap modal content.
 * @returns JSX element representing the modal root.
 */
export const ModalRoot = memo(({ modals, container, component: RootComponent = React.Fragment }: ModalRootProps) => {
    // State to store the mount node for modal rendering
    const [mountNode, setMountNode] = useState<Element | undefined>(undefined);

    // Effect to set the mount node based on container or document body
    useEffect(() => setMountNode(container || document.body));

    // Render modals as portals into the mount node
    return mountNode
        ? ReactDOM.createPortal(
            <RootComponent>
                {/* Render each modal using ModalRenderer */}
                {Object.keys(modals).map(key => (
                    <ModalRenderer key={key} component={modals[key]} />
                ))}
            </RootComponent>,
            mountNode
        )
        : null;
});