import React from "react";
// eslint-disable-next-line @typescript-eslint/no-var-requires
const convert = require("convert-units");
const roundToStep = function (num, step) {
    return Math.floor(num / step + 0.5) * step;
};
const DistanceScale = ({ zoom, incrementValue, widthPerUnit, position, scaleUnit, }) => {
    if (!zoom || !widthPerUnit || !incrementValue || !position)
        return null;
    const [rulerWidth, setRulerWidth] = React.useState(0);
    const widthInUnits = widthPerUnit / Math.pow(2, zoom);
    const scaleRulerStyle = {
        width: rulerWidth,
        height: "4px",
        border: "2px solid gray",
        borderTop: "none",
        display: "inline-block",
        marginLeft: "3px",
        marginRight: "3px",
        right: 0,
        bottom: 0,
    };
    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;
    React.useEffect(() => {
        setRulerWidth(scaleValue * Math.pow(2, zoom));
    }, [zoom]);
    return (React.createElement("div", { style: {
            bottom: position[0],
            left: position[1],
            position: "relative",
        } },
        React.createElement("label", null, convertedValue.toFixed(0)),
        convertedUnit,
        React.createElement("div", { style: scaleRulerStyle })));
};
DistanceScale.defaultProps = {
    zoom: -3,
    incrementValue: 100,
    widthPerUnit: 100,
    position: [10, 10],
    scaleUnit: "m",
};
export default DistanceScale;
//# sourceMappingURL=DistanceScale.js.map