"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ViewSize = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var units_1 = require("../utils/units");
var i18n_1 = require("../api/i18n");
var dompurify_1 = require("dompurify");
var ViewSizeContent = function (_a) {
    var gw = _a.gw, gh = _a.gh, unit = _a.unit;
    var str = (0, i18n_1.fmt)("{gw} x {gh} ({unit})", { gw: gw, gh: gh, unit: unit });
    return React.createElement("span", { dangerouslySetInnerHTML: { __html: (0, dompurify_1.sanitize)(str) } });
};
var ViewSize = function (props) {
    var width = props.width, height = props.height, view = props.view, metersPerUnit = props.metersPerUnit, units = props.units, precision = props.precision, locale = props.locale;
    var uom = (0, units_1.getUnitOfMeasure)(units);
    var _a = (0, units_1.getMapSize)([width, height], metersPerUnit, units, view.resolution, precision), gw = _a[0], gh = _a[1];
    //TODO: Support format string extension parameter from fusion widget
    return React.createElement("div", { className: "status-bar-component component-view-size" },
        React.createElement(ViewSizeContent, { gw: gw, gh: gh, unit: uom.abbreviation(locale) }));
};
exports.ViewSize = ViewSize;
//# sourceMappingURL=view-size.js.map