"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TaskPane = exports.TASK_PANE_OVERLAY_BGCOLOR = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var ReactDOM = tslib_1.__importStar(require("react-dom"));
var toolbar_1 = require("./toolbar");
var component_1 = require("../api/registry/component");
var i18n_1 = require("../api/i18n");
var url_1 = require("../utils/url");
var core_1 = require("@blueprintjs/core");
var constants_1 = require("../constants");
exports.TASK_PANE_OVERLAY_BGCOLOR = "#dee8f9";
function currentUrlDoesNotMatchMapName(currentUrl, mapName) {
    var normUrl = currentUrl.toLowerCase();
    //Only invalidate if url has mapname and it doesn't match our current one
    if (normUrl.indexOf("mapname=") >= 0 && mapName) {
        return normUrl.indexOf("mapname=".concat(mapName.toLowerCase())) < 0;
    }
    else {
        return false;
    }
}
// HACK:
//
// Having the lastUrlPushed props sounds extremely hacky, but we need a way to signal that
// the url its about to receive was pushed and should not be reloaded into the internal iframe
//
// This is because we want internal url transitions (eg. Clicking a link, submitting a form) to
// be recorded in the navigation stack so we can properly go back/forward just like a web browser.
// But we don't want these recorded URLs to accidentally trigger a re-load of the same url.
/**
 * A component that serves as a generic container for content or User Interface for custom functionality
 *
 * @export
 * @class TaskPane
 * @extends {React.Component<ITaskPaneProps, any>}
 */
var TaskPane = /** @class */ (function (_super) {
    tslib_1.__extends(TaskPane, _super);
    function TaskPane(props) {
        var _this = _super.call(this, props) || this;
        _this.onCloseFlyout = function (id) { var _a, _b; return (_b = (_a = _this.props).onCloseFlyout) === null || _b === void 0 ? void 0 : _b.call(_a, id); };
        _this.onOpenFlyout = function (id, metrics) { var _a, _b; return (_b = (_a = _this.props).onOpenFlyout) === null || _b === void 0 ? void 0 : _b.call(_a, id, metrics); };
        _this.onFrameMounted = function (iframe) {
            _this._iframe = iframe;
            if (_this._iframe) {
                var el = ReactDOM.findDOMNode(_this._iframe);
                //This is needed for backcompat with certain fusion widgets
                el.taskPaneId = constants_1.FUSION_TASKPANE_NAME;
            }
        };
        _this.onFrameLoaded = function (e) {
            var frame = e.currentTarget;
            if (frame.contentWindow) {
                _this.setState({ frameContentLoaded: true });
                _this.props.onUrlLoaded(frame.contentWindow.location.href);
            }
        };
        _this.taskButtons = [
            props.homeAction,
            { isSeparator: true },
            props.backAction,
            props.forwardAction
        ];
        _this.state = {
            activeComponent: null,
            invalidated: false,
            frameContentLoaded: false
        };
        return _this;
    }
    TaskPane.prototype.componentDidUpdate = function (prevProps) {
        var nextProps = this.props;
        if (prevProps.currentUrl != nextProps.currentUrl) {
            if (nextProps.currentUrl && nextProps.lastUrlPushed === false) {
                this.loadUrl(nextProps.currentUrl);
            }
        }
        if (!this.state.invalidated && nextProps.currentUrl && nextProps.currentUrl.indexOf("component://") != 0 && currentUrlDoesNotMatchMapName(nextProps.currentUrl, nextProps.mapName)) {
            //TODO: If we want to be smart, we could have the TaskPane amend the currentUrl with the new map name
            this.setState({ invalidated: true });
        }
        else if (this.state.invalidated && nextProps.currentUrl && (nextProps.currentUrl.indexOf("component://") == 0 || !currentUrlDoesNotMatchMapName(nextProps.currentUrl, nextProps.mapName))) {
            this.setState({ invalidated: false });
        }
    };
    TaskPane.prototype.componentDidMount = function () {
        if (this.props.currentUrl) {
            this.loadUrl(this.props.currentUrl);
        }
    };
    TaskPane.prototype.loadUrl = function (url) {
        var _this = this;
        //TODO: Can't convert this to functional component with hooks, until this type
        //of pattern is possible
        var compUri = (0, url_1.parseComponentUri)(url);
        if (compUri) {
            this.setState({ activeComponent: compUri.name, activeComponentProps: compUri.props });
        }
        else {
            this.setState({ activeComponent: null, frameContentLoaded: false }, function () {
                var _a;
                if (_this._iframe) {
                    (_a = _this._iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.location.replace(url);
                }
            });
        }
    };
    TaskPane.prototype.render = function () {
        var _this = this;
        var _a = this.state, invalidated = _a.invalidated, activeComponent = _a.activeComponent;
        var _b = this.props, locale = _b.locale, maxHeight = _b.maxHeight, showTaskBar = _b.showTaskBar;
        var taskMenu = {
            label: (0, i18n_1.tr)("MENU_TASKS", locale),
            flyoutAlign: "bottom left",
            flyoutId: constants_1.WEBLAYOUT_TASKMENU
        };
        var rootStyle = {};
        var taskBarStyle = {
            height: toolbar_1.DEFAULT_TOOLBAR_SIZE,
            backgroundColor: toolbar_1.TOOLBAR_BACKGROUND_COLOR
        };
        var taskBodyStyle = {};
        var taskFrameStyle = {
            border: "none"
        };
        var taskComponentContainerStyle = {
            border: "none"
        };
        if (!maxHeight) {
            rootStyle.width = "100%";
            rootStyle.height = "100%";
            taskBarStyle.position = "absolute";
            taskBarStyle.top = 0;
            taskBarStyle.left = 0;
            taskBarStyle.right = 0;
            taskBodyStyle.position = "absolute";
            taskBodyStyle.top = (showTaskBar === true ? toolbar_1.DEFAULT_TOOLBAR_SIZE : 0);
            taskBodyStyle.left = 0;
            taskBodyStyle.right = 0;
            taskBodyStyle.bottom = 0;
            taskBodyStyle.overflow = "hidden";
            taskFrameStyle.width = "100%";
            taskFrameStyle.height = "100%";
            taskComponentContainerStyle.width = "100%";
            taskComponentContainerStyle.height = "100%";
        }
        else {
            taskFrameStyle.width = "100%";
            taskFrameStyle.height = (showTaskBar === true ? (maxHeight - toolbar_1.DEFAULT_TOOLBAR_SIZE) : maxHeight);
            taskComponentContainerStyle.width = "100%";
            taskComponentContainerStyle.maxHeight = (showTaskBar === true ? (maxHeight - toolbar_1.DEFAULT_TOOLBAR_SIZE) : maxHeight);
            taskComponentContainerStyle.overflowY = "auto";
        }
        return React.createElement("div", { style: rootStyle },
            (function () {
                if (showTaskBar === true) {
                    return React.createElement("div", { style: taskBarStyle },
                        React.createElement(toolbar_1.Toolbar, { childItems: _this.taskButtons, containerStyle: { float: "left", height: toolbar_1.DEFAULT_TOOLBAR_SIZE }, onCloseFlyout: _this.onCloseFlyout, onOpenFlyout: _this.onOpenFlyout, flyoutStates: _this.props.flyoutStates }),
                        React.createElement(toolbar_1.Toolbar, { childItems: [taskMenu], containerStyle: { float: "right", height: toolbar_1.DEFAULT_TOOLBAR_SIZE }, onCloseFlyout: _this.onCloseFlyout, onOpenFlyout: _this.onOpenFlyout, flyoutStates: _this.props.flyoutStates }),
                        React.createElement("div", { style: { clear: "both" } }));
                }
            })(),
            React.createElement("div", { style: taskBodyStyle },
                (function () {
                    if (activeComponent != null) {
                        var cpp = _this.state.activeComponentProps;
                        taskComponentContainerStyle.overflowY = "auto";
                        return React.createElement("div", { style: taskComponentContainerStyle },
                            React.createElement(component_1.PlaceholderComponent, { id: activeComponent, componentProps: cpp, locale: _this.props.locale }));
                    }
                    else {
                        var frameContentLoaded = _this.state.frameContentLoaded;
                        var components = [
                            React.createElement("iframe", { key: "taskPaneFrame", name: "taskPaneFrame", ref: _this.onFrameMounted, onLoad: _this.onFrameLoaded, style: taskFrameStyle })
                        ];
                        if (frameContentLoaded == false) {
                            components.push(React.createElement("div", { key: "taskPaneFrameLoadingOverlay", style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, backgroundColor: exports.TASK_PANE_OVERLAY_BGCOLOR } },
                                React.createElement(core_1.NonIdealState, { icon: React.createElement(core_1.Spinner, { intent: core_1.Intent.NONE, size: core_1.Spinner.SIZE_LARGE }), title: (0, i18n_1.tr)("TASK_PANE_LOADING", locale), description: (0, i18n_1.tr)("TASK_PANE_LOADING_DESC", locale) })));
                        }
                        return components;
                    }
                })(),
                React.createElement("iframe", { name: "scriptFrame", style: { width: 0, height: 0, visibility: "hidden" } })));
    };
    return TaskPane;
}(React.Component));
exports.TaskPane = TaskPane;
//# sourceMappingURL=task-pane.js.map