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 { circularProgress, circularProgressCircle, circularProgressSvg } from "./circularProgressStyles.js";
/**
 * @example Indeterminate Example
 * ```tsx
 * import { CircularProgress } from "@react-md/core/progress/CircularProgress":
 * import { type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return <CircularProgress aria-label="Loading" />;
 * }
 * ```
 *
 * @example Determinate Example
 * ```tsx
 * import { CircularProgress } from "@react-md/core/progress/CircularProgress":
 * import { useState, type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   // a number from 0 - 100
 *   const [progress, setProgress] = useState(0);
 *
 *   return <CircularProgress aria-label="File upload" value={progress} />;
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/progress#circular-progress | Progress Demos}
 * @since 6.0.0 Updated the determinate circular progress to no longer
 * rotate while increasing the value and require a label for accessibility.
 */ export const CircularProgress = /*#__PURE__*/ forwardRef(function CircularProgress(props, ref) {
    const { id: propId, className, svgStyle, svgClassName, circleStyle: propCircleStyle, circleClassName, value, min = 0, max = 100, radius = 30, center = 33, viewBox = "0 0 66 66", theme, dense, dashoffset = 187, disableShrink, disableCentered, disableTransition, ...remaining } = props;
    const id = useEnsuredId(propId, "circular-progress");
    let progress;
    if (typeof value === "number") {
        progress = getPercentage({
            min,
            max,
            value,
            validate: true
        });
    }
    const circleStyle = useMemo(()=>{
        if (typeof progress !== "number") {
            return propCircleStyle;
        }
        return {
            ...propCircleStyle,
            strokeDashoffset: dashoffset - dashoffset * progress
        };
    }, [
        progress,
        propCircleStyle,
        dashoffset
    ]);
    const indeterminate = typeof progress !== "number";
    return /*#__PURE__*/ _jsx("span", {
        ...remaining,
        id: id,
        ref: ref,
        role: "progressbar",
        "aria-valuemin": min,
        "aria-valuemax": max,
        "aria-valuenow": value,
        className: circularProgress({
            theme,
            dense,
            disableCentered,
            className
        }),
        children: /*#__PURE__*/ _jsx("svg", {
            style: svgStyle,
            className: circularProgressSvg({
                className: svgClassName,
                indeterminate,
                disableShrink
            }),
            viewBox: viewBox,
            children: /*#__PURE__*/ _jsx("circle", {
                style: circleStyle,
                className: circularProgressCircle({
                    className: circleClassName,
                    indeterminate,
                    disableShrink,
                    disableTransition
                }),
                r: radius,
                cx: center,
                cy: center
            })
        })
    });
});

//# sourceMappingURL=CircularProgress.js.map