"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExternalRenderer = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const AdaptableContext_1 = require("../AdaptableContext");
const ExternalRenderer = ({ render, frameworkComponent, componentName = 'N/A', onDestroy, ...rest }) => {
    const ref = React.useRef(null);
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const [contentsHTML, setContentsHTML] = React.useState('');
    React.useLayoutEffect(() => {
        const element = ref.current;
        const adaptableApi = adaptable.api;
        if (render) {
            const html = render({
                phase: 'onMount',
                element,
                ...adaptableApi.internalApi.buildBaseContext(),
            });
            setContentsHTML(html);
        }
        else if (frameworkComponent) {
            adaptableApi.internalApi.createFrameworkComponent(element, frameworkComponent, 'toolbar');
        }
        return () => {
            if (render) {
                render({
                    phase: 'onDestroy',
                    element: element,
                    ...adaptableApi.internalApi.buildBaseContext(),
                });
            }
            else if (frameworkComponent) {
                onDestroy?.();
                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 
                // @ts-ignore
                componentName);
            }
        };
    }, []);
    const RFC = adaptable.variant === 'react' ? frameworkComponent : null;
    return RFC ? (React.createElement("div", { ...rest, ref: ref },
        React.createElement(RFC, { adaptableApi: adaptable.api }))) : (React.createElement("div", { ...rest, dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
};
exports.ExternalRenderer = ExternalRenderer;
