"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressIndicator = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const react_1 = require("react");
const Loader_1 = require("../Loader");
const AdaptableContext_1 = require("../../View/AdaptableContext");
const ExternalRenderer_1 = require("../../View/Components/ExternalRenderer");
const Dialog_1 = tslib_1.__importDefault(require("../Dialog"));
const rebass_1 = require("rebass");
const ProgressIndicator = () => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const { active, text, render, frameworkComponent } = (0, react_redux_1.useSelector)((state) => state.Popup.ProgressIndicator);
    const [visible, setVisible] = (0, react_1.useState)(false);
    const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = (0, react_1.useState)({
        top: 0,
        left: 0,
        height: 0,
        width: 0,
    });
    const disableAdaptableGrid = (containerElement, disabled) => {
        const DISABLING_CSS_CLASS = 'ab-wait-for-progress-indicator';
        if (!containerElement) {
            return;
        }
        if (disabled) {
            containerElement.classList.add(DISABLING_CSS_CLASS);
        }
        else {
            containerElement.classList.remove(DISABLING_CSS_CLASS);
        }
    };
    const updateGridContainerCoordinates = (containerElement) => {
        if (!containerElement) {
            return;
        }
        const { top, left, height, width } = containerElement.getBoundingClientRect();
        setProgressIndicatorCoordinates({ top, left, height, width });
    };
    (0, react_1.useEffect)(() => {
        disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
        disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
        updateGridContainerCoordinates(adaptable.getAgGridContainerElement());
        // #raf_progress_indicator
        // without rAF the progress indicator would be rendered instantly, without the 'transition-delay' defined via CSS
        requestAnimationFrame(() => {
            setVisible(active);
        });
    }, [active]);
    let customEl = null;
    if (render || frameworkComponent) {
        customEl = React.createElement(ExternalRenderer_1.ExternalRenderer, { render: render, frameworkComponent: frameworkComponent });
    }
    return (React.createElement(React.Fragment, null, active && (React.createElement(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}` },
        React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "column", p: 3, className: "ab-ProgressIndicator-body" },
            React.createElement(Loader_1.LoaderSpinner, null),
            React.createElement(rebass_1.Box, { mt: 3 },
                text && React.createElement(rebass_1.Box, null, text),
                customEl))))));
};
exports.ProgressIndicator = ProgressIndicator;
