"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScaleDisplay = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var i18n_1 = require("../api/i18n");
var number_1 = require("../utils/number");
/**
 * A component that displays the map scale
 * @param props
 */
var ScaleDisplay = function (props) {
    var view = props.view, style = props.style, locale = props.locale, finiteScales = props.finiteScales, onScaleChanged = props.onScaleChanged;
    var _a = React.useState(undefined), localScale = _a[0], setLocalScale = _a[1];
    var onFiniteScaleChanged = function (e) { return onScaleChanged === null || onScaleChanged === void 0 ? void 0 : onScaleChanged(parseFloat(e.target.value)); };
    var onScaleKeyPressed = function (e) {
        if (e.key == 'Enter' && localScale) {
            onScaleChanged === null || onScaleChanged === void 0 ? void 0 : onScaleChanged(localScale);
        }
    };
    var onScaleInputChanged = function (e) { return setLocalScale(parseFloat(e.target.value)); };
    React.useEffect(function () {
        if (!finiteScales && view && view.scale != localScale) {
            setLocalScale(view.scale);
        }
    }, [finiteScales, view]);
    var label = (0, i18n_1.tr)("FMT_SCALE_DISPLAY", locale, {
        scale: ""
    });
    if (finiteScales) {
        var fi = (0, number_1.getFiniteScaleIndexForScale)(finiteScales, view.scale);
        var fiScale = finiteScales[fi];
        //NOTE: Not using BP styled HTML select as the size imposed is not acceptable
        return React.createElement("div", { className: "status-bar-component component-scale-display", style: style },
            label,
            " ",
            React.createElement("select", { className: "scale-input", value: fiScale, onChange: onFiniteScaleChanged }, finiteScales.map(function (s) {
                return React.createElement("option", { key: s, value: s }, s);
            })));
    }
    else {
        return React.createElement("div", { className: "status-bar-component component-scale-display", style: style },
            label,
            " ",
            React.createElement("input", { className: "scale-input", type: "number", value: localScale || "", onChange: onScaleInputChanged, onKeyPress: onScaleKeyPressed }));
    }
};
exports.ScaleDisplay = ScaleDisplay;
//# sourceMappingURL=scale-display.js.map