"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 = (_a) => {
    var { render, frameworkComponent, componentName = 'N/A', onDestroy } = _a, rest = tslib_1.__rest(_a, ["render", "frameworkComponent", "componentName", "onDestroy"]);
    const ref = React.useRef();
    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({
                visible: true,
                phase: 'onMount',
                element,
                adaptableApi,
                userName: adaptableApi.optionsApi.getUserName(),
                adaptableId: adaptableApi.optionsApi.getAdaptableId(),
            });
            setContentsHTML(html);
        }
        else if (frameworkComponent) {
            adaptableApi.internalApi.createFrameworkComponent(element, frameworkComponent, 'toolbar');
        }
        return () => {
            if (render) {
                render({
                    visible: false,
                    phase: 'onDestroy',
                    element: element,
                    adaptableApi,
                    userName: adaptableApi.optionsApi.getUserName(),
                    adaptableId: adaptableApi.optionsApi.getAdaptableId(),
                });
            }
            else if (frameworkComponent) {
                onDestroy === null || onDestroy === void 0 ? void 0 : onDestroy();
                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 
                // @ts-ignore
                componentName);
            }
        };
    }, []);
    const RFC = adaptable.variant === 'react' ? frameworkComponent : null;
    return RFC ? (React.createElement("div", Object.assign({}, rest, { ref: ref }),
        React.createElement(RFC, { adaptableApi: adaptable.api }))) : (React.createElement("div", Object.assign({}, rest, { dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref })));
};
exports.ExternalRenderer = ExternalRenderer;
