define(["require", "exports", "tslib", "react", "@fluentui/react", "../DonutChart/index", "../VerticalStackedBarChart/index", "./PlotlySchemaAdapter", "../LineChart/index", "../HorizontalBarChartWithAxis/index", "../AreaChart/index", "../HeatMapChart/index", "../SankeyChart/SankeyChart", "../GaugeChart/index", "../GroupedVerticalBarChart/index", "../VerticalBarChart/index", "./imageExporter"], function (require, exports, tslib_1, React, react_1, index_1, index_2, PlotlySchemaAdapter_1, index_3, index_4, index_5, index_6, SankeyChart_1, index_7, index_8, index_9, imageExporter_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.DeclarativeChart = void 0;
    var useColorMapping = function () {
        var colorMap = React.useRef(new Map());
        return colorMap;
    };
    /**
     * DeclarativeChart component.
     * {@docCategory DeclarativeChart}
     */
    exports.DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
        var plotlySchema = (0, PlotlySchemaAdapter_1.sanitizeJson)(props.chartSchema).plotlySchema;
        var plotlyInput = plotlySchema;
        var selectedLegends = plotlySchema.selectedLegends;
        var colorMap = useColorMapping();
        var theme = (0, react_1.useTheme)();
        var isDarkTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.isInverted) !== null && _a !== void 0 ? _a : false;
        var chartRef = React.useRef(null);
        if (!(0, PlotlySchemaAdapter_1.isArrayOrTypedArray)(selectedLegends)) {
            selectedLegends = [];
        }
        var _l = React.useState(selectedLegends), activeLegends = _l[0], setActiveLegends = _l[1];
        var onActiveLegendsChange = function (keys) {
            setActiveLegends(keys);
            if (props.onSchemaChange) {
                props.onSchemaChange({ plotlySchema: { plotlyInput: plotlyInput, selectedLegends: keys } });
            }
        };
        React.useEffect(function () {
            // eslint-disable-next-line @typescript-eslint/no-shadow
            var plotlySchema = (0, PlotlySchemaAdapter_1.sanitizeJson)(props.chartSchema).plotlySchema;
            // eslint-disable-next-line @typescript-eslint/no-shadow
            var selectedLegends = plotlySchema.selectedLegends;
            setActiveLegends(selectedLegends !== null && selectedLegends !== void 0 ? selectedLegends : []);
        }, [props.chartSchema]);
        var multiSelectLegendProps = {
            canSelectMultipleLegends: true,
            onChange: onActiveLegendsChange,
            selectedLegends: activeLegends,
        };
        var commonProps = {
            legendProps: multiSelectLegendProps,
            componentRef: chartRef,
            calloutProps: { layerProps: { eventBubblingEnabled: true } },
        };
        var checkAndRenderChart = function (renderChartJsx, isAreaChart) {
            if (isAreaChart === void 0) { isAreaChart = false; }
            var fallbackVSBC = false;
            var xValues = plotlyInput.data[0].x;
            var isXDate = (0, PlotlySchemaAdapter_1.isDateArray)(xValues);
            var isXNumber = (0, PlotlySchemaAdapter_1.isNumberArray)(xValues);
            var isXMonth = (0, PlotlySchemaAdapter_1.isMonthArray)(xValues);
            if (isXDate || isXNumber) {
                var chartProps = tslib_1.__assign(tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)({ data: plotlyInput.data, layout: plotlyInput.layout }, isAreaChart, colorMap, isDarkTheme)), commonProps);
                return renderChartJsx(chartProps);
            }
            else if (isXMonth) {
                var updatedData = plotlyInput.data.map(function (dataPoint) { return (tslib_1.__assign(tslib_1.__assign({}, dataPoint), { x: (0, PlotlySchemaAdapter_1.updateXValues)(dataPoint.x) })); });
                var chartProps = tslib_1.__assign(tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)({ data: updatedData, layout: plotlyInput.layout }, isAreaChart, colorMap, isDarkTheme)), commonProps);
                return renderChartJsx(chartProps);
            }
            // Unsupported schema, render as VerticalStackedBarChart
            fallbackVSBC = true;
            return (React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap, isDarkTheme, fallbackVSBC), commonProps)));
        };
        var exportAsImage = React.useCallback(function (opts) {
            var _a;
            return (0, imageExporter_1.toImage)((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, tslib_1.__assign({ background: theme.semanticColors.bodyBackground, scale: 5 }, opts));
        }, [theme]);
        React.useImperativeHandle(props.componentRef, function () { return ({
            exportAsImage: exportAsImage,
        }); }, [exportAsImage]);
        switch (plotlyInput.data[0].type) {
            case 'pie':
                return React.createElement(index_1.DonutChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToDonutProps)(plotlySchema, colorMap, isDarkTheme), commonProps));
            case 'bar':
                var orientation_1 = plotlyInput.data[0].orientation;
                if (orientation_1 === 'h') {
                    return (React.createElement(index_4.HorizontalBarChartWithAxis, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHorizontalBarWithAxisProps)(plotlySchema, colorMap, isDarkTheme), commonProps)));
                }
                else {
                    var containsLines = plotlyInput.data.some(function (series) { return series.type === 'scatter' || (0, PlotlySchemaAdapter_1.isLineData)(series); });
                    if (['group', 'overlay'].includes((_b = plotlySchema === null || plotlySchema === void 0 ? void 0 : plotlySchema.layout) === null || _b === void 0 ? void 0 : _b.barmode) && !containsLines) {
                        return (React.createElement(index_8.GroupedVerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGVBCProps)(plotlySchema, colorMap, isDarkTheme), commonProps)));
                    }
                    return (React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap, isDarkTheme), commonProps)));
                }
            case 'scatter':
                if (plotlyInput.data[0].mode === 'markers') {
                    throw new Error("Unsupported chart - type :".concat((_c = plotlyInput.data[0]) === null || _c === void 0 ? void 0 : _c.type, ", mode: ").concat((_d = plotlyInput.data[0]) === null || _d === void 0 ? void 0 : _d.mode));
                }
                var isAreaChart_1 = plotlyInput.data.some(function (series) { return series.fill === 'tonexty' || series.fill === 'tozeroy'; });
                var renderChartJsx = function (chartProps) {
                    if (isAreaChart_1) {
                        return React.createElement(index_5.AreaChart, tslib_1.__assign({}, chartProps));
                    }
                    return React.createElement(index_3.LineChart, tslib_1.__assign({}, chartProps));
                };
                return checkAndRenderChart(renderChartJsx, isAreaChart_1);
            case 'heatmap':
                return React.createElement(index_6.HeatMapChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHeatmapProps)(plotlySchema), commonProps, { legendProps: {} }));
            case 'sankey':
                return (React.createElement(SankeyChart_1.SankeyChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToSankeyProps)(plotlySchema, colorMap, isDarkTheme), commonProps)));
            case 'indicator':
                if ((_g = (_f = (_e = plotlyInput.data) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.mode) === null || _g === void 0 ? void 0 : _g.includes('gauge')) {
                    return (React.createElement(index_7.GaugeChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGaugeProps)(plotlySchema, colorMap, isDarkTheme), commonProps)));
                }
                throw new Error("Unsupported chart - type: ".concat((_h = plotlyInput.data[0]) === null || _h === void 0 ? void 0 : _h.type, ", mode: ").concat((_j = plotlyInput.data[0]) === null || _j === void 0 ? void 0 : _j.mode));
            case 'histogram':
                return (React.createElement(index_9.VerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVBCProps)(plotlySchema, colorMap, isDarkTheme), commonProps)));
            default:
                var xValues = plotlyInput.data[0].x;
                var yValues = plotlyInput.data[0].y;
                if (xValues && yValues && xValues.length > 0 && yValues.length > 0) {
                    var renderLineChartJsx = function (chartProps) {
                        return React.createElement(index_3.LineChart, tslib_1.__assign({}, chartProps));
                    };
                    return checkAndRenderChart(renderLineChartJsx);
                }
                throw new Error("Unsupported chart type :".concat((_k = plotlyInput.data[0]) === null || _k === void 0 ? void 0 : _k.type));
        }
    });
    exports.DeclarativeChart.displayName = 'DeclarativeChart';
});
//# sourceMappingURL=DeclarativeChart.js.map