import React, { forwardRef } from "react";
import { cap, scale } from "@ezez/utils";
import { fnWithProps } from "../../../types/fnWithProps.js";
import { Background, Container, Value } from "./Progress.styled.js";
const ProgressBase = forwardRef((props, ref) => {
    const { value, valueFrom, scaleFrom = 0, scaleTo = 100, ...rest } = props;
    const from = cap(valueFrom !== null && valueFrom !== void 0 ? valueFrom : scaleFrom, scaleTo, scaleFrom);
    const to = cap(value !== null && value !== void 0 ? value : scaleFrom, scaleTo, scaleFrom);
    const scaledFrom = valueFrom != null ? scale(scaleFrom, scaleTo, 0, 100, from) : 0;
    const percFrom = Math.max(scaledFrom, 0);
    const scaledTo = value != null ? scale(scaleTo, scaleFrom, 0, 100, to) : 100;
    const percTo = Math.max(scaledTo, 0);
    const isZeroWidth = from >= to || percFrom === 100 || percTo === 100;
    const css = {
        right: `${percTo}%`,
        left: `${percFrom}%`,
    };
    return (React.createElement(Container, { ref: ref, ...rest },
        React.createElement(Background, null),
        React.createElement(Value, { css: css, zero: isZeroWidth })));
});
ProgressBase.displayName = "Progress";
const Progress = fnWithProps(ProgressBase, {
    selectors: {
        background: Background.toString(),
        value: Value.toString(),
    },
});
Progress.toString = () => Container.toString();
const ProgressBackgroundSelector = Background.toString();
const ProgressValueSelector = Value.toString();
export { Progress, ProgressBackgroundSelector, ProgressValueSelector };
//# sourceMappingURL=Progress.js.map