"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShowChartButton = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const AdaptableContext_1 = require("../AdaptableContext");
const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
const ChartingState_1 = require("../../AdaptableState/ChartingState");
const useAgChartState_1 = require("./useAgChartState");
const useExternalChartState_1 = require("./useExternalChartState");
const BaseShowChartButton = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
    const chartContainers = chartingOptions?.chartContainers;
    if (props.chartOpened) {
        return (React.createElement(SimpleButton_1.default, { "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_1.default, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
    }
    return (React.createElement(DropdownButton_1.default, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions },
        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "success" }, "Open")));
};
const ShowAgChartButton = (props) => {
    const adaptableApi = (0, AdaptableContext_1.useAdaptable)().api;
    const chartingOptions = adaptableApi.optionsApi.getChartingOptions();
    const chartContainers = chartingOptions?.chartContainers;
    const { isOpen, showChart, closeChart } = (0, useAgChartState_1.useAgChartState)(props.chartDefinition);
    const containerOptions = [
        {
            label: chartingOptions.agGridContainerName ?? GeneralConstants_1.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 = (0, AdaptableContext_1.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, } = (0, useExternalChartState_1.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 }));
};
const ShowChartButton = (props) => {
    if ((0, ChartingState_1.isAgChartDefinition)(props.data)) {
        return React.createElement(ShowAgChartButton, { chartDefinition: props.data });
    }
    if ((0, ChartingState_1.isExternalChartDefinition)(props.data)) {
        return React.createElement(ShowExternalChartButton, { chartDefinition: props.data });
    }
    return React.createElement(React.Fragment, null);
};
exports.ShowChartButton = ShowChartButton;
