import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useMemo } from "react";
import { useEnsuredId } from "../useEnsuredId.js";
import { getPercentage } from "../utils/getPercentage.js";
import { linearProgress, linearProgressBar } from "./linearProgressStyles.js";
/**
 * @example Indeterminate Example
 * ```tsx
 * import { LinearProgress } from "@react-md/core/progress/LinearProgress";
 * import { type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return <LinearProgress aria-label="Loading" />;
 * }
 * ```
 *
 * @example Determinate Example
 * ```tsx
 * import { LinearProgress } from "@react-md/core/progress/LinearProgress";
 * 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} />;
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/progress#linear-progress | Progress Demos}
 * @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, barProps, min = 0, max = 100, value, reverse, theme, disableTransition, vertical, 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 indeterminate = typeof progress !== "number";
    return /*#__PURE__*/ _jsx("span", {
        ...remaining,
        id: id,
        ref: ref,
        style: style,
        role: "progressbar",
        "aria-valuemin": min,
        "aria-valuemax": max,
        "aria-valuenow": value,
        className: linearProgress({
            className,
            theme,
            vertical,
            indeterminate
        }),
        children: /*#__PURE__*/ _jsx("span", {
            ...barProps,
            style: barStyle,
            className: linearProgressBar({
                className: barClassName,
                reverse,
                vertical,
                indeterminate,
                disableTransition
            })
        })
    });
});

//# sourceMappingURL=LinearProgress.js.map