"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomToolbarWrapper = exports.CustomToolbarCmp = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const AdaptableContext_1 = require("../AdaptableContext");
const AdaptableButton_1 = require("../Components/AdaptableButton");
const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
const CustomToolbarCmp = (props) => {
    const { api } = (0, AdaptableContext_1.useAdaptable)();
    // dummy object which is used to force a re-render of the toolbar
    const [componentRevision, setComponentRevision] = (0, react_1.useState)(1);
    const renderContentContainerId = api.dashboardApi.internalApi.getCustomToolbarRenderContainerId(props.customToolbar.name);
    const renderContentContainerRef = (0, react_1.useRef)(null);
    const [renderedContentHTML, setRenderedContentHTML] = (0, react_1.useState)('');
    const buttonsContainerId = api.dashboardApi.internalApi.getCustomToolbarButtonsContainerId(props.customToolbar.name);
    const componentContainerId = api.dashboardApi.internalApi.getCustomToolbarComponentContainerId(props.customToolbar.name);
    const componentContainerRef = (0, react_1.useRef)(null);
    (0, react_1.useLayoutEffect)(() => {
        const element = renderContentContainerRef.current;
        const adaptableApi = api;
        if (props.customToolbar.render) {
            const html = props.customToolbar.render({
                phase: 'onMount',
                element,
                ...adaptableApi.internalApi.buildBaseContext(),
            });
            setRenderedContentHTML(html);
        }
    }, [componentRevision, props.dashboardRevision]);
    (0, react_1.useLayoutEffect)(() => {
        const element = renderContentContainerRef.current;
        const adaptableApi = api;
        // cleanup runs in a separate effect, this way it's executed only once on unmount
        return () => {
            if (props.customToolbar.render) {
                props.customToolbar.render({
                    phase: 'onDestroy',
                    element,
                    ...adaptableApi.internalApi.buildBaseContext(),
                });
            }
        };
    }, []);
    (0, react_1.useLayoutEffect)(() => {
        const containerElement = componentContainerRef.current;
        const adaptableApi = api;
        if (props.customToolbar.frameworkComponent) {
            adaptableApi.internalApi.createFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
        }
        const destroyUnsubscribe = adaptableApi.eventApi.on('AdaptableDestroy', () => {
            adaptableApi?.internalApi?.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
        });
        return () => {
            destroyUnsubscribe();
            if (props.customToolbar.frameworkComponent) {
                adaptableApi?.internalApi?.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
            }
        };
    }, []);
    const CustomReactFrameworkComponent = props.customToolbar
        .frameworkComponent;
    return (React.createElement(React.Fragment, null,
        props.customToolbar.render && (React.createElement("div", { id: renderContentContainerId, ref: renderContentContainerRef, className: `ab-CustomToolbar__rendered-content ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: renderedContentHTML } })),
        props.customToolbar.toolbarButtons && (React.createElement("div", { id: buttonsContainerId, className: `ab-CustomToolbar__buttons ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 } }, props.customToolbar.toolbarButtons.map((button, index) => {
            const dashboardContext = {
                customToolbar: props.customToolbar,
                dashboardState: api.dashboardApi.getDashboardState(),
                ...api.internalApi.buildBaseContext(),
            };
            const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
            let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
            let buttonLabel = api.internalApi.getLabelForButton(button, dashboardContext);
            let buttonTooltip = api.internalApi.getTooltipForButton(button, dashboardContext);
            if (button.hidden && button.hidden(button, dashboardContext)) {
                return null;
            }
            const disabled = button.disabled && button.disabled(button, dashboardContext);
            let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
            let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
            return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-base-space)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: buttonStyle?.className || '', onClick: () => {
                    button.onClick ? button.onClick(button, dashboardContext) : null;
                    setTimeout(() => {
                        // mutate state to force a re-rendering
                        setComponentRevision(componentRevision + 1);
                    }, 16);
                } }, buttonLabel));
        }))),
        CustomReactFrameworkComponent && (React.createElement("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}` }, api.gridApi.getVariant() === 'react' ? (React.createElement(CustomReactFrameworkComponent, { adaptableApi: api })) : null))));
};
exports.CustomToolbarCmp = CustomToolbarCmp;
const CustomToolbarWrapper = (props) => {
    const { api } = (0, AdaptableContext_1.useAdaptable)();
    return (React.createElement(PanelDashboard_1.PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'configure') !=
            undefined, showCloseActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'close') != undefined, onConfigure: () => {
            const customToolbarConfiguredInfo = {
                ...api.internalApi.buildBaseContext(),
                customToolbar: props.customToolbar,
            };
            api.eventApi.emit('CustomToolbarConfigured', customToolbarConfiguredInfo);
        }, accessLevel: api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard') },
        React.createElement(exports.CustomToolbarCmp, { ...props })));
};
exports.CustomToolbarWrapper = CustomToolbarWrapper;
