"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2019-2020 GoodData Corporation
var React = require("react");
var uuid = require("uuid");
var isEqual = require("lodash/isEqual");
var isEmpty = require("lodash/isEmpty");
var get = require("lodash/get");
var noop = require("lodash/noop");
var omit = require("lodash/omit");
var PluggableBarChart_1 = require("./pluggableVisualizations/barChart/PluggableBarChart");
var PluggableColumnChart_1 = require("./pluggableVisualizations/columnChart/PluggableColumnChart");
var PluggableHeatmap_1 = require("./pluggableVisualizations/heatMap/PluggableHeatmap");
var PluggableLineChart_1 = require("./pluggableVisualizations/lineChart/PluggableLineChart");
var PluggableAreaChart_1 = require("./pluggableVisualizations/areaChart/PluggableAreaChart");
var PluggablePieChart_1 = require("./pluggableVisualizations/pieChart/PluggablePieChart");
var PluggableDonutChart_1 = require("./pluggableVisualizations/donutChart/PluggableDonutChart");
var PluggablePivotTable_1 = require("./pluggableVisualizations/pivotTable/PluggablePivotTable");
var PluggableHeadline_1 = require("./pluggableVisualizations/headline/PluggableHeadline");
var PluggableScatterPlot_1 = require("./pluggableVisualizations/scatterPlot/PluggableScatterPlot");
var PluggableComboChartDeprecated_1 = require("./pluggableVisualizations/comboChart/PluggableComboChartDeprecated");
var PluggableComboChart_1 = require("./pluggableVisualizations/comboChart/PluggableComboChart");
var PluggableTreemap_1 = require("./pluggableVisualizations/treeMap/PluggableTreemap");
var PluggableFunnelChart_1 = require("./pluggableVisualizations/funnelChart/PluggableFunnelChart");
var PluggableBubbleChart_1 = require("./pluggableVisualizations/bubbleChart/PluggableBubbleChart");
var PluggableXirr_1 = require("./pluggableVisualizations/xirr/PluggableXirr");
var PluggableGeoPushpinChart_1 = require("./pluggableVisualizations/geoChart/PluggableGeoPushpinChart");
var PluggableBulletChart_1 = require("./pluggableVisualizations/bulletChart/PluggableBulletChart");
// visualization catalogue - add your new visualization here
var VisualizationsCatalog = {
    bar: PluggableBarChart_1.PluggableBarChart,
    column: PluggableColumnChart_1.PluggableColumnChart,
    line: PluggableLineChart_1.PluggableLineChart,
    area: PluggableAreaChart_1.PluggableAreaChart,
    pie: PluggablePieChart_1.PluggablePieChart,
    donut: PluggableDonutChart_1.PluggableDonutChart,
    table: PluggablePivotTable_1.PluggablePivotTable,
    headline: PluggableHeadline_1.PluggableHeadline,
    scatter: PluggableScatterPlot_1.PluggableScatterPlot,
    bubble: PluggableBubbleChart_1.PluggableBubbleChart,
    heatmap: PluggableHeatmap_1.PluggableHeatmap,
    combo: PluggableComboChartDeprecated_1.PluggableComboChartDeprecated,
    combo2: PluggableComboChart_1.PluggableComboChart,
    treemap: PluggableTreemap_1.PluggableTreemap,
    funnel: PluggableFunnelChart_1.PluggableFunnelChart,
    xirr: PluggableXirr_1.PluggableXirr,
    pushpin: PluggableGeoPushpinChart_1.PluggableGeoPushpinChart,
    bullet: PluggableBulletChart_1.PluggableBulletChart,
};
var BaseVisualization = /** @class */ (function (_super) {
    __extends(BaseVisualization, _super);
    function BaseVisualization(props) {
        var _this = _super.call(this, props) || this;
        _this.componentId = uuid.v4();
        return _this;
    }
    BaseVisualization.prototype.componentWillUnmount = function () {
        this.visualization.unmount();
    };
    BaseVisualization.prototype.componentWillReceiveProps = function (nextProps) {
        var newDerivedBucketItemsChanged = !isEmpty(nextProps.newDerivedBucketItems) &&
            !isEqual(nextProps.newDerivedBucketItems, this.props.newDerivedBucketItems);
        if (newDerivedBucketItemsChanged) {
            this.triggerPlaceNewDerivedBucketItems(nextProps);
            return;
        }
        var visualizationClassChanged = !isEqual(nextProps.visualizationClass, this.props.visualizationClass);
        var referencePointChanged = this.bucketReferencePointHasChanged(this.props.referencePoint, nextProps.referencePoint);
        if (visualizationClassChanged) {
            this.componentId = uuid.v4();
            this.setupVisualization(nextProps);
        }
        if (referencePointChanged || visualizationClassChanged) {
            this.triggerExtendedReferencePointChanged(nextProps, 
            // only pass current props if the visualization class is the same (see getExtendedReferencePoint JSDoc)
            visualizationClassChanged ? undefined : this.props);
        }
    };
    BaseVisualization.prototype.componentDidMount = function () {
        this.setupVisualization(this.props);
        this.updateVisualization();
        this.triggerExtendedReferencePointChanged(this.props);
    };
    BaseVisualization.prototype.componentDidUpdate = function () {
        if (this.props.isMdObjectValid) {
            this.updateVisualization();
        }
    };
    BaseVisualization.prototype.render = function () {
        return React.createElement("div", { key: this.componentId, style: { height: "100%" }, className: this.getClassName() });
    };
    BaseVisualization.prototype.getVisualizationClassName = function () {
        return "gd-vis-" + this.componentId;
    };
    BaseVisualization.prototype.getConfigPanelClassName = function () {
        return "gd-configuration-panel-content";
    };
    BaseVisualization.prototype.getClassName = function () {
        return "gd-base-visualization " + this.getVisualizationClassName();
    };
    BaseVisualization.prototype.setupVisualization = function (props) {
        var visualizationClass = props.visualizationClass, environment = props.environment, locale = props.locale, featureFlags = props.featureFlags, visualizationProperties = props.visualizationProperties, references = props.references, projectId = props.projectId;
        if (this.visualization) {
            this.visualization.unmount();
        }
        var type = get(visualizationClass, "content.url", "").split(":")[1];
        var visConstructor = this.props.visualizationsCatalog[type];
        if (visConstructor) {
            var afterRender = props.afterRender, onLoadingChanged = props.onLoadingChanged, onError = props.onError, onExportReady = props.onExportReady, pushData = props.pushData, onDrill = props.onDrill, onFiredDrillEvent = props.onFiredDrillEvent;
            this.visualization = new visConstructor({
                projectId: projectId,
                locale: locale,
                environment: environment,
                element: "." + this.getVisualizationClassName(),
                configPanelElement: "." + this.getConfigPanelClassName(),
                callbacks: {
                    afterRender: afterRender,
                    onLoadingChanged: onLoadingChanged,
                    onError: onError,
                    onExportReady: onExportReady,
                    pushData: pushData,
                    onDrill: onDrill,
                    onFiredDrillEvent: onFiredDrillEvent,
                },
                featureFlags: featureFlags,
                visualizationProperties: visualizationProperties,
                references: references,
            });
        }
        else {
            console.error("Error: unsupported visualization type - " + type); // tslint:disable-line
        }
    };
    BaseVisualization.prototype.updateVisualization = function () {
        if (this.visualization) {
            this.visualization.update({
                dataSource: this.props.dataSource,
                resultSpec: this.props.resultSpec,
                locale: this.props.locale,
                dimensions: {
                    width: this.props.width,
                    height: this.props.height,
                },
                custom: {
                    stickyHeaderOffset: this.props.stickyHeaderOffset,
                    drillableItems: this.props.drillableItems,
                    totalsEditAllowed: this.props.totalsEditAllowed,
                },
                config: this.props.config,
            }, this.props.visualizationProperties, this.props.mdObject, this.props.references);
        }
    };
    BaseVisualization.prototype.triggerPlaceNewDerivedBucketItems = function (props) {
        var newDerivedBucketItems = props.newDerivedBucketItems, referencePoint = props.referencePoint, onNewDerivedBucketItemsPlaced = props.onNewDerivedBucketItemsPlaced;
        if (this.visualization && referencePoint && newDerivedBucketItems && onNewDerivedBucketItemsPlaced) {
            this.visualization
                .addNewDerivedBucketItems(referencePoint, newDerivedBucketItems)
                .then(onNewDerivedBucketItemsPlaced);
        }
    };
    BaseVisualization.prototype.triggerExtendedReferencePointChanged = function (newProps, currentProps) {
        var newReferencePoint = newProps.referencePoint, onExtendedReferencePointChanged = newProps.onExtendedReferencePointChanged;
        if (this.visualization && newReferencePoint && onExtendedReferencePointChanged) {
            this.visualization
                .getExtendedReferencePoint(newReferencePoint, currentProps && currentProps.referencePoint)
                .then(onExtendedReferencePointChanged);
        }
    };
    BaseVisualization.prototype.bucketReferencePointHasChanged = function (currentReferencePoint, nextReferencePoint) {
        return !isEqual(omit(currentReferencePoint, "properties"), omit(nextReferencePoint, "properties"));
    };
    BaseVisualization.defaultProps = {
        visualizationsCatalog: VisualizationsCatalog,
        visualizationProperties: null,
        references: null,
        newDerivedBucketItems: [],
        referencePoint: null,
        onExtendedReferencePointChanged: noop,
        onNewDerivedBucketItemsPlaced: noop,
        resultSpec: {},
        isMdObjectValid: true,
        featureFlags: {},
    };
    return BaseVisualization;
}(React.PureComponent));
exports.BaseVisualization = BaseVisualization;
//# sourceMappingURL=BaseVisualization.js.map