import * as React from 'react';
import { useSelector } from 'react-redux';
import { useAdaptable } from '../AdaptableContext';
import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
export const useAgChartState = (chartDefinition) => {
    const [chartRef, setChartRef] = React.useState(null);
    const adaptable = useAdaptable();
    const currentChartModels = useSelector((state) => InternalRedux.ChartingCurrentChartModelsSelector(state.Internal));
    React.useEffect(() => {
        if (!chartDefinition) {
            setChartRef(null);
            return;
        }
        const currentChartRef = adaptable.api.chartingApi.getChartRef(chartDefinition?.Model?.chartId) ?? null;
        setChartRef(currentChartRef);
    }, [currentChartModels, chartDefinition]);
    const closeAlreadyOpenedChartsInContainer = (element) => {
        const chartModelAlreadyInChartContainer = currentChartModels.find((chartModel) => {
            const chartRef = adaptable.api.chartingApi.getChartRef(chartModel.chartId);
            return chartRef && element.contains(chartRef.chartElement);
        });
        if (chartModelAlreadyInChartContainer) {
            const chartRef = adaptable.api.chartingApi.getChartRef(chartModelAlreadyInChartContainer.chartId);
            if (chartRef) {
                chartRef.destroyChart();
            }
        }
    };
    const showChart = React.useCallback((chartContainer) => {
        if (!adaptable || !chartDefinition) {
            return;
        }
        const element = typeof chartContainer?.element === 'string'
            ? document.querySelector(chartContainer.element)
            : chartContainer?.element;
        if (!element && typeof chartContainer?.element === 'string') {
            adaptable.logger.consoleLogByMessageType(`Chart container element not found: ${chartContainer.element}`, 'Error');
            return;
        }
        const chartRef = adaptable.api.chartingApi.getChartRef(chartDefinition.Model.chartId);
        if (chartRef) {
            // chart alredy opened
            return;
        }
        /**
         * When using a custom container, make sure multiple charts are not opened in the same container.
         * If multple charts are opened in the same contianer, it infinitly adds the charts to the container.
         */
        if (chartContainer && element) {
            if (chartContainer.chartsDisplay !== 'multiple') {
                closeAlreadyOpenedChartsInContainer(element);
            }
            adaptable.api.chartingApi.showChartDefinitionOnce(chartDefinition, element);
        }
        else {
            adaptable.api.chartingApi.showChartDefinitionOnce(chartDefinition);
        }
    }, [chartDefinition, currentChartModels]);
    const closeChart = React.useCallback(() => {
        if (chartRef) {
            chartRef.destroyChart();
        }
    }, [chartRef]);
    return {
        isOpen: Boolean(chartRef),
        showChart,
        closeChart,
    };
};
