import { useCallback, cloneElement } from 'react';
import { withEngineComponent } from './hocs/withEngineComponent';
import PropTypes from 'prop-types';
export const PageRenderer = (props) => {
    var _a;
    const { viewBuilderMetaData, setSideSheetOpen, sideSheetOpen, sideSheetComponent, setSideSheetComponent } = props;
    // useCallback is used to prevent an error due to a nested useEffect inside useMemo
    const RenderPageComponentTree = useCallback(() => {
        if (!viewBuilderMetaData || !viewBuilderMetaData.length)
            return;
        const componentsList = viewBuilderMetaData &&
            viewBuilderMetaData.map((item, index) => item === null || item === void 0 ? void 0 : item.map((subItem) => withEngineComponent(subItem.component)({
                propsComponent: subItem,
                setSideSheetOpen,
                sideSheetOpen,
                sideSheetComponent,
                setSideSheetComponent
            })));
        // viewBuilderMetaData.map(item => {
        //   item.map(subItem => {
        //     console.log('subItem', subItem);
        //   });
        // });
        return (componentsList === null || componentsList === void 0 ? void 0 : componentsList.flat()) || [];
    }, [
        setSideSheetComponent,
        setSideSheetOpen,
        sideSheetComponent,
        sideSheetOpen,
        viewBuilderMetaData
    ]);
    return (_a = RenderPageComponentTree()) === null || _a === void 0 ? void 0 : _a.map((component, index) => cloneElement(component)
    //cloneElement(component, { key: index })
    );
};
PageRenderer.propTypes = {
    /**
     * View Builder Meta Data
     */
    viewBuilderMetaData: PropTypes.array.isRequired
};
//# sourceMappingURL=PageRenderer.js.map