import * as React from 'react';
import { useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
import { LoaderSpinner } from '../Loader';
import { useAdaptable } from '../../View/AdaptableContext';
import { ExternalRenderer } from '../../View/Components/ExternalRenderer';
import Dialog from '../Dialog';
import { Box, Flex } from '../Flex';
export const ProgressIndicator = () => {
    const adaptable = useAdaptable();
    const { active, text, render, frameworkComponent, renderMode } = useSelector((state) => state.Popup.ProgressIndicator);
    const [visible, setVisible] = useState(false);
    const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = 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 });
    };
    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, { render: render, frameworkComponent: frameworkComponent });
    }
    // Check if we should replace the default content
    const replaceContent = renderMode === 'dialog' && customEl;
    return (React.createElement(
        React.Fragment,
        null,
        active && (React.createElement(Dialog, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}`, modalProps: {
                style: progressIndicatorCoordinates,
            } }, replaceContent ? (
        // If renderMode is 'dialog', replace the entire content with custom element
        customEl) : (
        // Otherwise use the default Flex layout
        (React.createElement(
            Flex,
            { alignItems: "center", flexDirection: "column", className: "ab-ProgressIndicator-body twa:p-3" },
            React.createElement(LoaderSpinner, null),
            React.createElement(Box, { className: "twa:mt-3" },
                text && React.createElement(Box, null, text),
                customEl)
        )))))
    ));
};
