import React from "react";
import convert from "convert-units";
const roundToStep = function (num, step) {
    return Math.floor(num / step + 0.5) * step;
};
export const DistanceScale = ({ zoom = -3, incrementValue = 100, widthPerUnit = 100, style, scaleUnit = "m", }) => {
    if (!zoom || !widthPerUnit || !incrementValue || !scaleUnit)
        return null;
    if (!convert().possibilities().includes(scaleUnit)) {
        return null;
    }
    const widthInUnits = widthPerUnit / Math.pow(2, zoom);
    const scaleValue = widthInUnits < incrementValue
        ? Math.round(widthInUnits)
        : roundToStep(widthInUnits, incrementValue);
    const convertedUnit = convert(scaleValue)
        .from(scaleUnit)
        .toBest().unit;
    const convertedValue = convert(scaleValue)
        .from(scaleUnit)
        .toBest().val;
    const rulerWidth = scaleValue * Math.pow(2, zoom);
    const scaleRulerStyle = {
        width: rulerWidth,
        height: "4px",
        border: "2px solid",
        borderTop: "none",
        display: "inline-block",
        marginLeft: "3px",
    };
    return (React.createElement("div", { style: Object.assign({ position: "absolute" }, style) },
        React.createElement("label", { style: Object.assign({}, style) },
            convertedValue.toFixed(0),
            convertedUnit),
        React.createElement("div", { style: scaleRulerStyle })));
};
//# sourceMappingURL=DistanceScale.js.map