"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MapViewer = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var ReactDOM = tslib_1.__importStar(require("react-dom"));
var base_1 = require("../components/map-providers/base");
var assets_1 = require("../constants/assets");
var map_load_indicator_1 = require("../components/map-load-indicator");
var common_1 = require("../api/common");
var context_1 = require("../components/map-providers/context");
var core_1 = require("@blueprintjs/core");
var mapguide_1 = require("../components/map-providers/mapguide");
var i18n_1 = require("../api/i18n");
require("ol/ol.css");
var subscriber_1 = require("./subscriber");
var hooks_1 = require("./hooks");
var flyout_1 = require("../actions/flyout");
var constants_1 = require("../constants");
var CoreMapViewer = /** @class */ (function (_super) {
    tslib_1.__extends(CoreMapViewer, _super);
    function CoreMapViewer(props) {
        var _this = _super.call(this, props) || this;
        //#region IViewerComponent
        _this.isShiftKeyDown = function () { return _this.state.shiftKey; };
        _this.selectCanDragPan = function () { return _this.props.selectCanDragPan; };
        _this.isContextMenuOpen = function () { return _this.props.isContextMenuOpen; };
        _this.setDigitizingType = function (digitizingType) { return _this.setState({ digitizingType: digitizingType }); };
        _this.onBeginDigitization = function (callback) { };
        _this.onHideContextMenu = function () { var _a, _b; return (_b = (_a = _this.props).onHideContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a); };
        _this.onOpenTooltipLink = function (url) { };
        _this.onDispatch = function (action) { return _this.props.onDispatch(action); };
        _this.addSubscribers = function (props) {
            var subscribers = tslib_1.__spreadArray(tslib_1.__spreadArray([], _this.state.subscribers, true), props, true);
            _this.setState({ subscribers: subscribers });
            return props.map(function (p) { return p.name; });
        };
        _this.removeSubscribers = function (names) {
            var subscribers = _this.state.subscribers;
            var ol = subscribers.length;
            var ns = subscribers.filter(function (s) { return names.indexOf(s.name) < 0; });
            _this.setState({ subscribers: subscribers });
            return ns.length < ol;
        };
        //#endregion
        _this.onContextMenu = function (e) {
            var _a, _b;
            if (!_this.mounted)
                return;
            if (_this.props.context.isMouseOverTooltip()) {
                return;
            }
            e.preventDefault();
            //console.log(`Open context menu at (${e.clientX}, ${e.clientY})`);
            (_b = (_a = _this.props).onContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a, [e.clientX, e.clientY]);
        };
        _this.onKeyDown = function (e) {
            if (!_this.mounted)
                return;
            _this.props.context.onKeyDown(e);
            _this.setState({ shiftKey: e.shiftKey });
        };
        _this.onKeyUp = function (e) {
            if (!_this.mounted)
                return;
            _this.setState({ shiftKey: e.shiftKey });
        };
        _this.onMouseDown = function (e) {
            if (!_this.mounted)
                return;
            if (!_this.state.isMouseDown) {
                _this.setState({
                    isMouseDown: true
                });
            }
        };
        _this.onMouseUp = function (e) {
            if (!_this.mounted)
                return;
            if (_this.state.isMouseDown) {
                _this.setState({
                    isMouseDown: false
                });
            }
        };
        _this.mounted = false;
        _this.state = {
            shiftKey: false,
            isMouseDown: false,
            digitizingType: undefined,
            loaded: 0,
            loading: 0,
            subscribers: []
        };
        return _this;
    }
    CoreMapViewer.prototype.addImageLoading = function () {
        var loading = this.state.loading;
        var newLoading = (loading || 0) + 1;
        this.setState({ loading: newLoading });
        this.props.context.incrementBusyWorker();
    };
    CoreMapViewer.prototype.getSubscribers = function () {
        return this.state.subscribers.map(function (s) { return s.name; });
    };
    CoreMapViewer.prototype.addImageLoaded = function () {
        var _a = this.state, loaded = _a.loaded, loading = _a.loading;
        var newLoadedCount = (loaded || 0) + 1;
        if (loading === newLoadedCount) {
            this.setState({ loaded: 0, loading: 0 });
        }
        else {
            this.setState({ loaded: newLoadedCount });
        }
        this.props.context.decrementBusyWorker();
    };
    CoreMapViewer.prototype.componentDidMount = function () {
        document.addEventListener("keydown", this.onKeyDown);
        document.addEventListener("keyup", this.onKeyUp);
        var mapNode = ReactDOM.findDOMNode(this);
        this.props.context.attachToComponent(mapNode, this);
        this.mounted = true;
    };
    CoreMapViewer.prototype.componentWillUnmount = function () {
        this.props.context.detachFromComponent();
        this.mounted = false;
    };
    CoreMapViewer.prototype.render = function () {
        var _a = this.props, context = _a.context, backgroundColor = _a.backgroundColor, disableCursors = _a.disableCursors;
        var isMouseDown = this.state.isMouseDown;
        var tool = context.getActiveTool();
        var style = {
            width: "100%",
            height: "100%"
        };
        if (!disableCursors) {
            if (context.isDigitizing()) {
                var dtype = this.state.digitizingType;
                switch (dtype) {
                    case "Point":
                        style.cursor = "url(".concat(assets_1.CURSOR_DIGITIZE_POINT, "), auto");
                        //console.log(`cursor: ${style.cursor}`);
                        break;
                    case "Line":
                        style.cursor = "url(".concat(assets_1.CURSOR_DIGITIZE_LINE, "), auto");
                        //console.log(`cursor: ${style.cursor}`);
                        break;
                    case "LineString":
                        style.cursor = "url(".concat(assets_1.CURSOR_DIGITIZE_LINESTRING, "), auto");
                        //console.log(`cursor: ${style.cursor}`);
                        break;
                    case "Rectangle":
                        style.cursor = "url(".concat(assets_1.CURSOR_DIGITIZE_RECT, "), auto");
                        //console.log(`cursor: ${style.cursor}`);
                        break;
                    case "Polygon":
                        style.cursor = "url(".concat(assets_1.CURSOR_DIGITIZE_POLYGON, "), auto");
                        //console.log(`cursor: ${style.cursor}`);
                        break;
                    case "Circle":
                        style.cursor = "url(".concat(assets_1.CURSOR_DIGITIZE_CIRCLE, "), auto");
                        //console.log(`cursor: ${style.cursor}`);
                        break;
                }
            }
            else {
                switch (tool) {
                    case common_1.ActiveMapTool.Pan:
                        if (isMouseDown) {
                            style.cursor = "url(".concat(assets_1.CURSOR_GRABBING, "), auto");
                            //console.log(`cursor: ${style.cursor}`);
                        }
                        else {
                            style.cursor = "url(".concat(assets_1.CURSOR_GRAB, "), auto");
                            //console.log(`cursor: ${style.cursor}`);
                        }
                        break;
                    case common_1.ActiveMapTool.Zoom:
                        style.cursor = "url(".concat(assets_1.CURSOR_ZOOM_IN, "), auto");
                        //console.log(`cursor: ${style.cursor}`);
                        break;
                }
            }
        }
        if (backgroundColor) {
            style.backgroundColor = backgroundColor;
            //style.backgroundColor = `#${map.BackgroundColor.substring(2)}`;
        }
        var _b = this.state, loading = _b.loading, loaded = _b.loaded, subscribers = _b.subscribers;
        return React.createElement("div", { className: "map-viewer-component", style: style, onContextMenu: this.onContextMenu, onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp },
            React.createElement(map_load_indicator_1.MapLoadIndicator, { loaded: loaded || 0, loading: loading || 0, position: this.props.loadIndicatorPosition, color: this.props.loadIndicatorColor }),
            subscribers.map(function (s, i) { return React.createElement(subscriber_1.Subscriber, tslib_1.__assign({ key: "subscriber-".concat(i, "-").concat(s.name) }, s)); }),
            this.props.children);
    };
    return CoreMapViewer;
}(React.Component));
var MapViewer = function (_a) {
    var _b;
    var children = _a.children;
    var context = (0, context_1.useMapProviderContext)();
    var toasterRef = React.useRef(null);
    var loadIndicatorPositioning = (0, hooks_1.useConfiguredLoadIndicatorPositioning)();
    var loadIndicatorColor = (0, hooks_1.useConfiguredLoadIndicatorColor)();
    var dispatch = (0, context_1.useReduxDispatch)();
    var hookFunc = context.getHookFunction();
    var clientSelection = (0, hooks_1.useActiveMapClientSelectionSet)();
    var appSettings = (0, hooks_1.useCustomAppSettings)();
    var nextState = hookFunc();
    var mapName = nextState.mapName, layers = nextState.layers, initialExternalLayers = nextState.initialExternalLayers, bgColor = nextState.bgColor, locale = nextState.locale;
    var flyouts = (0, hooks_1.useViewerFlyouts)();
    React.useEffect(function () {
        var _a;
        if (!clientSelection) {
            (_a = context.getSelectedFeatures()) === null || _a === void 0 ? void 0 : _a.clear();
        }
    }, [clientSelection]);
    var bContextMenuOpen = (((_b = flyouts[constants_1.WEBLAYOUT_CONTEXTMENU]) === null || _b === void 0 ? void 0 : _b.open) == true);
    var bSelectCanDragPan = (0, hooks_1.useViewerSelectCanDragPan)();
    var showContextMenuAction = function (pos) { return dispatch((0, flyout_1.openContextMenu)({ x: pos[0], y: pos[1] })); };
    var hideContextMenuAction = function () { return dispatch((0, flyout_1.closeContextMenu)()); };
    var onContextMenu = function (pos) { return showContextMenuAction === null || showContextMenuAction === void 0 ? void 0 : showContextMenuAction(pos); };
    //HACK: Still have some MG-specific state we're needing to check for here. Minor abstraction leakage.
    var agentUri;
    var agentKind;
    var selection = null;
    if ((0, mapguide_1.isMapGuideProviderState)(nextState)) {
        agentUri = nextState.agentUri;
        agentKind = nextState.agentKind;
        selection = nextState.selection;
    }
    context.setToasterRef(toasterRef);
    context.setProviderState(nextState);
    (0, base_1.useViewerSideEffects)(context, appSettings !== null && appSettings !== void 0 ? appSettings : {}, nextState.isReady, mapName, layers, initialExternalLayers, agentUri, agentKind, selection);
    if (nextState.isReady) {
        return React.createElement(React.Fragment, null,
            React.createElement(core_1.Toaster, { usePortal: false, position: core_1.Position.TOP, ref: toasterRef }),
            React.createElement(CoreMapViewer, { context: context, onDispatch: dispatch, backgroundColor: bgColor, onContextMenu: onContextMenu, disableCursors: (appSettings === null || appSettings === void 0 ? void 0 : appSettings["DISABLE_CURSORS"]) == "1", onHideContextMenu: hideContextMenuAction, isContextMenuOpen: bContextMenuOpen, selectCanDragPan: bSelectCanDragPan, loadIndicatorPosition: loadIndicatorPositioning, loadIndicatorColor: loadIndicatorColor }, children));
    }
    else {
        return React.createElement("div", null, (0, i18n_1.tr)("LOADING_MSG", locale));
    }
};
exports.MapViewer = MapViewer;
//# sourceMappingURL=neo-map-viewer.js.map