import * as React from 'react';
import SimpleButton from '../../components/SimpleButton';
import { useAdaptable } from '../AdaptableContext';
import DropdownButton from '../../components/DropdownButton';
import { AG_GRID_CHART_WINDOW } from '../../Utilities/Constants/GeneralConstants';
import { isAgChartDefinition, isExternalChartDefinition, } from '../../AdaptableState/ChartingState';
import { useAgChartState } from './useAgChartState';
import { useExternalChartState } from './useExternalChartState';
const BaseShowChartButton = (props) => {
    const adaptable = useAdaptable();
    const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
    const chartContainers = chartingOptions?.chartContainers;
    if (props.chartOpened) {
        return (React.createElement(SimpleButton, { "data-name": "close-chart-button", onClick: props.onCloseChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
    }
    if (!chartContainers?.length) {
        return (React.createElement(SimpleButton, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
    }
    return (React.createElement(DropdownButton, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions },
        React.createElement(SimpleButton, { variant: "raised", tone: "success" }, "Open")));
};
const ShowAgChartButton = (props) => {
    const adaptableApi = useAdaptable().api;
    const chartingOptions = adaptableApi.optionsApi.getChartingOptions();
    const chartContainers = chartingOptions?.chartContainers;
    const { isOpen, showChart, closeChart } = useAgChartState(props.chartDefinition);
    const containerOptions = [
        {
            label: chartingOptions.agGridContainerName ?? AG_GRID_CHART_WINDOW,
            onClick: () => {
                showChart(null);
            },
            ...(chartContainers
                ? chartContainers?.map((contianerDef) => ({
                    label: contianerDef.name,
                    onClick: () => showChart(contianerDef),
                }))
                : []),
        },
    ];
    return (React.createElement(BaseShowChartButton, { chartOpened: isOpen, onShowChart: showChart, onCloseChart: closeChart, containerOptions: containerOptions }));
};
const ShowExternalChartButton = (props) => {
    const adaptable = useAdaptable();
    const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
    const chartContainers = chartingOptions?.chartContainers;
    /**
     * Need to refresh after the chart is closed/opened
     */
    const { isOpen, showChart: onShow, hideChart: onHide, } = useExternalChartState(props.chartDefinition);
    const containerOptions = chartContainers
        ? chartContainers?.map((contianerDef) => ({
            label: contianerDef.name,
            onClick: () => onShow(contianerDef),
        }))
        : [];
    return (React.createElement(BaseShowChartButton, { chartOpened: isOpen, onShowChart: onShow, onCloseChart: onHide, containerOptions: containerOptions }));
};
export const ShowChartButton = (props) => {
    if (isAgChartDefinition(props.data)) {
        return React.createElement(ShowAgChartButton, { chartDefinition: props.data });
    }
    if (isExternalChartDefinition(props.data)) {
        return React.createElement(ShowExternalChartButton, { chartDefinition: props.data });
    }
    return React.createElement(React.Fragment, null);
};
