"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MeasureContainer = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var common_1 = require("../api/common");
var runtime_1 = require("../api/runtime");
var i18n_1 = require("../api/i18n");
var measure_context_1 = require("./measure-context");
var number_1 = require("../utils/number");
var core_1 = require("@blueprintjs/core");
var hooks_1 = require("./hooks");
var map_1 = require("../actions/map");
var context_1 = require("../components/map-providers/context");
var hooks_mapguide_1 = require("./hooks-mapguide");
var layer_set_1 = require("../api/layer-set");
var dompurify_1 = require("dompurify");
var _measurements = [];
var MeasureContainerInner = /** @class */ (function (_super) {
    tslib_1.__extends(MeasureContainerInner, _super);
    function MeasureContainerInner(props) {
        var _this = _super.call(this, props) || this;
        _this.onTypeChanged = function (e) {
            var newType = e.target.value;
            _this.setState({ drawType: newType }, function () {
                var activeMapName = _this.props.activeMapName;
                if (activeMapName && _this.state.measuring === true) {
                    var activeMeasure = _measurements.filter(function (m) { return m.getMapName() === activeMapName; })[0];
                    if (activeMeasure) {
                        activeMeasure.handleDrawTypeChange();
                    }
                }
            });
        };
        _this.onClearMeasurements = function (e) {
            e.preventDefault();
            var activeMapName = _this.props.activeMapName;
            if (activeMapName) {
                var activeMeasure = _measurements.filter(function (m) { return m.getMapName() === activeMapName; })[0];
                if (activeMeasure) {
                    activeMeasure.clearMeasurements();
                }
            }
            return false;
        };
        _this.onStartMeasure = function () {
            _this.startMeasure();
        };
        _this.onEndMeasure = function () {
            _this.endMeasure();
        };
        _this.state = {
            measuring: false,
            drawType: "LineString"
        };
        return _this;
    }
    MeasureContainerInner.prototype.startMeasure = function () {
        var _a, _b;
        var activeMapName = this.props.activeMapName;
        var _c = this.state, type = _c.drawType, measuring = _c.measuring;
        if (activeMapName && type && !measuring) {
            //Set to none to prevent select tool interference when measuring
            (_b = (_a = this.props).setActiveTool) === null || _b === void 0 ? void 0 : _b.call(_a, common_1.ActiveMapTool.None);
            var activeMeasure = _measurements.filter(function (m) { return m.getMapName() === activeMapName; })[0];
            if (activeMeasure) {
                activeMeasure.startMeasure();
                this.setState({ measuring: true });
            }
        }
    };
    MeasureContainerInner.prototype.endMeasure = function () {
        var activeMapName = this.props.activeMapName;
        var measuring = this.state.measuring;
        if (activeMapName && measuring) {
            var activeMeasure = _measurements.filter(function (m) { return m.getMapName() === activeMapName; })[0];
            if (activeMeasure) {
                activeMeasure.endMeasure();
                this.setState({ measuring: false });
            }
        }
    };
    MeasureContainerInner.prototype.updateSegments = function (kind, total, segments) {
        this.setState({ activeType: kind, segmentTotal: total, segments: segments });
    };
    MeasureContainerInner.prototype.clearSegments = function () {
        this.setState({ segments: undefined });
    };
    MeasureContainerInner.prototype.getCurrentDrawType = function () { return this.state.drawType; };
    MeasureContainerInner.prototype.getLocale = function () {
        return this.props.locale || i18n_1.DEFAULT_LOCALE;
    };
    MeasureContainerInner.prototype.componentDidMount = function () {
        var _this = this;
        var activeMeasure;
        if (_measurements.length == 0) {
            var _a = this.props, mapNames = _a.mapNames, activeMapName = _a.activeMapName;
            var viewer = (0, runtime_1.getViewer)();
            if (viewer && mapNames && mapNames.length) {
                for (var _i = 0, mapNames_1 = mapNames; _i < mapNames_1.length; _i++) {
                    var mapName = mapNames_1[_i];
                    var context = new measure_context_1.MeasureContext(viewer, mapName, this);
                    _measurements.push(context);
                    if (activeMapName == mapName) {
                        activeMeasure = context;
                    }
                }
            }
        }
        else {
            for (var _b = 0, _measurements_1 = _measurements; _b < _measurements_1.length; _b++) {
                var measure = _measurements_1[_b];
                measure.setParent(this);
            }
            activeMeasure = _measurements.filter(function (m) { return m.getMapName() === _this.props.activeMapName; })[0];
        }
        if (activeMeasure && this.props.activeMapName) {
            activeMeasure.activate(this.props.activeMapName, this);
        }
    };
    MeasureContainerInner.prototype.componentWillUnmount = function () {
        var activeMapName = this.props.activeMapName;
        this.setState({ measuring: false });
        for (var _i = 0, _measurements_2 = _measurements; _i < _measurements_2.length; _i++) {
            var measure = _measurements_2[_i];
            measure.detachParent();
        }
        if (activeMapName) {
            for (var _a = 0, _measurements_3 = _measurements; _a < _measurements_3.length; _a++) {
                var measure = _measurements_3[_a];
                measure.deactivate(activeMapName);
            }
        }
    };
    MeasureContainerInner.prototype.componentDidUpdate = function (prevProps) {
        var nextProps = this.props;
        //Active map changed
        if (prevProps.activeMapName != nextProps.activeMapName) {
            var oldMeasure = _measurements.filter(function (m) { return m.getMapName() === prevProps.activeMapName; })[0];
            var newMeasure = _measurements.filter(function (m) { return m.getMapName() === nextProps.activeMapName; })[0];
            if (oldMeasure) {
                oldMeasure.deactivate(prevProps.activeMapName);
            }
            if (newMeasure) {
                newMeasure.activate(nextProps.activeMapName, this);
            }
            //Reset
            this.setState({ measuring: false });
        }
    };
    MeasureContainerInner.prototype.render = function () {
        var _this = this;
        var _a = this.state, measuring = _a.measuring, type = _a.drawType;
        var measureUnits = this.props.measureUnits;
        var locale = this.getLocale();
        return React.createElement("div", { className: "component-measure" },
            React.createElement("form", { className: "form-inline" },
                React.createElement("label", { className: "bp3-label" },
                    (0, i18n_1.tr)("MEASUREMENT_TYPE", locale),
                    React.createElement("div", { className: "bp3-select" },
                        React.createElement(core_1.HTMLSelect, { value: type, onChange: this.onTypeChanged },
                            React.createElement("option", { value: "LineString" }, (0, i18n_1.tr)("MEASUREMENT_TYPE_LENGTH", locale)),
                            React.createElement("option", { value: "Polygon" }, (0, i18n_1.tr)("MEASUREMENT_TYPE_AREA", locale))))),
                React.createElement(core_1.ButtonGroup, null,
                    React.createElement(core_1.Button, { type: "button", icon: "play", disabled: measuring, onClick: this.onStartMeasure }, (0, i18n_1.tr)("MEASUREMENT_START", locale)),
                    React.createElement(core_1.Button, { type: "button", icon: "stop", disabled: !measuring, onClick: this.onEndMeasure }, (0, i18n_1.tr)("MEASUREMENT_END", locale)),
                    React.createElement(core_1.Button, { type: "button", icon: "cross", onClick: this.onClearMeasurements }, (0, i18n_1.tr)("MEASUREMENT_CLEAR", locale))),
                (function () {
                    if (_this.state.measuring === true) {
                        return React.createElement("div", null,
                            React.createElement(core_1.Callout, { intent: core_1.Intent.PRIMARY, title: (0, i18n_1.tr)("MEASURING", locale) }, (0, i18n_1.tr)("MEASURING_MESSAGE", locale)),
                            (function () {
                                if (_this.state.segments) {
                                    return React.createElement("table", { className: "bp3-html-table bp3-html-table-condensed" },
                                        React.createElement("thead", null,
                                            React.createElement("tr", null,
                                                React.createElement("th", null, (0, i18n_1.tr)("MEASURE_SEGMENT", locale)),
                                                React.createElement("th", null, (0, i18n_1.tr)("MEASURE_LENGTH", locale)))),
                                        React.createElement("tbody", null,
                                            _this.state.segments.map(function (s) {
                                                return React.createElement("tr", { key: "segment-".concat(s.segment) },
                                                    React.createElement("td", null, (0, i18n_1.tr)("MEASURE_SEGMENT_PART", locale, { segment: s.segment })),
                                                    measureUnits
                                                        ? React.createElement("td", null, "".concat((0, number_1.roundTo)(s.length, 2), " ").concat((0, layer_set_1.toProjUnit)(measureUnits)))
                                                        : React.createElement("td", null, (0, i18n_1.tr)("UNIT_FMT_M", locale, { value: (0, number_1.roundTo)(s.length, 2) })));
                                            }),
                                            (function () {
                                                if (_this.state.segmentTotal && _this.state.activeType) {
                                                    return React.createElement("tr", null, (function () {
                                                        if (_this.state.activeType == "Area") {
                                                            return React.createElement(React.Fragment, null,
                                                                React.createElement("td", null,
                                                                    React.createElement("strong", null, (0, i18n_1.tr)("MEASURE_TOTAL_AREA", locale))),
                                                                React.createElement("td", null, measureUnits
                                                                    ? React.createElement("div", { dangerouslySetInnerHTML: { __html: "".concat((0, number_1.roundTo)(_this.state.segmentTotal, 4), " ").concat((0, layer_set_1.toProjUnit)(measureUnits), " <sup>2</sup>") } })
                                                                    : React.createElement("div", { dangerouslySetInnerHTML: { __html: (0, dompurify_1.sanitize)((0, i18n_1.tr)("UNIT_FMT_SQM", locale, { value: "".concat((0, number_1.roundTo)(_this.state.segmentTotal, 4)) })) } })));
                                                        }
                                                        else {
                                                            return React.createElement(React.Fragment, null,
                                                                React.createElement("td", null,
                                                                    React.createElement("strong", null, (0, i18n_1.tr)("MEASURE_TOTAL_LENGTH", locale))),
                                                                React.createElement("td", null, measureUnits
                                                                    ? React.createElement("div", { dangerouslySetInnerHTML: { __html: "".concat((0, number_1.roundTo)(_this.state.segmentTotal, 4), " ").concat((0, layer_set_1.toProjUnit)(measureUnits)) } })
                                                                    : React.createElement("div", { dangerouslySetInnerHTML: { __html: (0, dompurify_1.sanitize)((0, i18n_1.tr)("UNIT_FMT_M", locale, { value: "".concat((0, number_1.roundTo)(_this.state.segmentTotal, 4)) })) } })));
                                                        }
                                                    })());
                                                }
                                            })()));
                                }
                            })());
                    }
                })()));
    };
    return MeasureContainerInner;
}(React.Component));
var MeasureContainer = function (props) {
    var _a;
    var activeMapName = (0, hooks_1.useActiveMapName)();
    var locale = (0, hooks_1.useViewerLocale)();
    var mapNames = (_a = (0, hooks_1.useAvailableMaps)()) === null || _a === void 0 ? void 0 : _a.map(function (m) { return m.value; });
    var dispatch = (0, context_1.useReduxDispatch)();
    var setActiveToolAction = function (tool) { return dispatch((0, map_1.setActiveTool)(tool)); };
    var isArbitrary = (0, hooks_mapguide_1.useActiveMapIsArbitraryCoordSys)();
    var projUnits = (0, hooks_mapguide_1.useActiveMapProjectionUnits)();
    return React.createElement(MeasureContainerInner, tslib_1.__assign({ activeMapName: activeMapName, locale: locale, mapNames: mapNames, setActiveTool: setActiveToolAction, measureUnits: isArbitrary ? projUnits : undefined }, props));
};
exports.MeasureContainer = MeasureContainer;
//# sourceMappingURL=measure.js.map