import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef, useMemo } from "react";
import { cssUtils } from "../cssUtils.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { bem } from "../utils/bem.js";
import { getPercentage } from "../utils/getPercentage.js";
const styles = bem("rmd-linear-progress");
/**
 * **Server Component**
 *
 * @example
 * Indeterminate Example
 * ```tsx
 * import { LinearProgress } from "@react-md/core";
 * import { type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return <LinearProgress aria-label="Loading" />;
 * }
 * ```
 *
 * @example
 * Determinate Example
 * ```tsx
 * import { LinearProgress } from "@react-md/core";
 * import { useState, type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   // a number from 0 - 100
 *   const [progress, setProgress] = useState(0);
 *
 *   return <LinearProgress aria-label="File upload" value={progress} />;
 * }
 * ```
 *
 * @remarks \@since 6.0.0 Supports rendering as any of the theme colors and
 * requires a label for accessibility.
 */ export const LinearProgress = /*#__PURE__*/ forwardRef(function LinearProgress(props, ref) {
    const { id: propId, style: propStyle, className, barStyle: propBarStyle, barClassName, min = 0, max = 100, value, reverse = false, theme = "primary", disableTransition = false, vertical = false, verticalHeight = 240, ...remaining } = props;
    const id = useEnsuredId(propId, "linear-progress");
    const style = useMemo(()=>{
        if (!vertical || verticalHeight === null) {
            return propStyle;
        }
        return {
            ...propStyle,
            height: verticalHeight
        };
    }, [
        propStyle,
        vertical,
        verticalHeight
    ]);
    let progress;
    if (typeof value === "number") {
        progress = getPercentage({
            min,
            max,
            value,
            validate: true
        });
    }
    const barStyle = useMemo(()=>{
        if (typeof progress !== "number") {
            return propBarStyle;
        }
        const key = vertical ? "height" : "width";
        return {
            ...propBarStyle,
            [key]: `${progress * 100}%`
        };
    }, [
        progress,
        propBarStyle,
        vertical
    ]);
    const determinate = typeof progress === "number";
    const indeterminate = !determinate;
    return /*#__PURE__*/ _jsx("span", {
        ...remaining,
        id: id,
        ref: ref,
        style: style,
        role: "progressbar",
        "aria-valuemin": min,
        "aria-valuemax": max,
        "aria-valuenow": value,
        className: cnb(styles({
            vertical,
            horizontal: !vertical,
            determinate,
            indeterminate
        }), theme !== "current-color" && cssUtils({
            textColor: theme
        }), className),
        children: /*#__PURE__*/ _jsx("span", {
            style: barStyle,
            className: cnb(styles("bar", {
                vertical,
                "vertical-reverse": vertical && reverse,
                horizontal: !vertical,
                "horizontal-reverse": !vertical && reverse,
                animate: !disableTransition && determinate,
                determinate,
                indeterminate,
                "determinate-reverse": determinate && reverse && !vertical,
                "determinate-vertical-reverse": determinate && reverse && vertical,
                "indeterminate-reverse": indeterminate && reverse && !vertical,
                "indeterminate-vertical": indeterminate && vertical,
                "indeterminate-vertical-reverse": indeterminate && reverse && vertical
            }), barClassName)
        })
    });
});

//# sourceMappingURL=LinearProgress.js.map