import { c as ZIndex } from "../../constants2.js";
import { t as palette } from "../../palette.js";
import classNames from "classnames";
import { useEffect, useRef } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import styles from "./styles.module.scss";
let ProgressbarSize = /* @__PURE__ */ function(ProgressbarSize$1) {
	ProgressbarSize$1["small"] = "small";
	ProgressbarSize$1["medium"] = "medium";
	ProgressbarSize$1["large"] = "large";
	return ProgressbarSize$1;
}({});
let ProgressBarMode = /* @__PURE__ */ function(ProgressBarMode$1) {
	ProgressBarMode$1["ondark"] = "ondark";
	ProgressBarMode$1["onlight"] = "onlight";
	return ProgressBarMode$1;
}({});
let Overlay = /* @__PURE__ */ function(Overlay$1) {
	Overlay$1["screen"] = "screen";
	Overlay$1["parent"] = "parent";
	return Overlay$1;
}({});
var Progressbar = ({ value, size = ProgressbarSize.large, mode = ProgressBarMode.onlight, overlay, testId, ariaLabel }) => {
	if (overlay) mode = ProgressBarMode.ondark;
	value = Math.max(0, Math.min(value, 100));
	let width;
	if (size === ProgressbarSize.large) width = 96;
	else if (size === ProgressbarSize.medium) width = 50;
	else width = 44;
	const totalRadius = width / 2;
	const strokeWidth = 8;
	const radius = totalRadius - strokeWidth / 2;
	const viewBoxSize = totalRadius * 2;
	const viewBoxCenter = totalRadius;
	const circleBackgroundColor = mode === ProgressBarMode.onlight ? palette.blueberry100 : palette.neutral700;
	const mainColor = mode === ProgressBarMode.onlight ? palette.blueberry600 : palette.white;
	const circumference = 2 * Math.PI * radius;
	const strokeDashoffset = circumference - value / 100 * circumference;
	const valueText = `${value}%`;
	const wrapperRef = useRef(null);
	useEffect(() => {
		if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) wrapperRef.current.parentElement.style.position = "relative";
	}, []);
	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
		ref: wrapperRef,
		className: classNames({
			[styles["progressbar--overlay"]]: overlay,
			[styles["progressbar--overlay-screen"]]: overlay === Overlay.screen,
			[styles["progressbar--overlay-parent"]]: overlay === Overlay.parent
		}),
		"data-testid": testId,
		role: "progressbar",
		"aria-valuemin": 0,
		"aria-valuemax": 100,
		"aria-valuenow": value,
		"aria-label": ariaLabel,
		style: overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {},
		children: /* @__PURE__ */ jsxs("svg", {
			role: "presentation",
			width: viewBoxSize,
			height: viewBoxSize,
			viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
			className: styles["progressbar__svg"],
			children: [
				/* @__PURE__ */ jsx("circle", {
					cx: viewBoxCenter,
					cy: viewBoxCenter,
					r: radius,
					stroke: circleBackgroundColor,
					strokeWidth,
					fill: "none"
				}),
				/* @__PURE__ */ jsx("circle", {
					cx: viewBoxCenter,
					cy: viewBoxCenter,
					r: radius,
					stroke: mainColor,
					strokeWidth,
					fill: "none",
					strokeDasharray: circumference,
					strokeDashoffset,
					className: styles["progressbar__progress-circle"],
					transform: `rotate(-90 ${viewBoxCenter} ${viewBoxCenter})`
				}),
				/* @__PURE__ */ jsx("text", {
					className: "progress-wheel__text--large",
					fontSize: "1.5rem",
					fill: mainColor,
					x: viewBoxCenter,
					y: viewBoxCenter,
					textAnchor: "middle",
					alignmentBaseline: "middle",
					children: size === ProgressbarSize.large && valueText
				})
			]
		})
	}), /* @__PURE__ */ jsx("div", {
		className: styles["progressbar__sr-only-text"],
		"aria-live": "assertive",
		"aria-atomic": "true",
		children: valueText
	})] });
};
var Progressbar_default = Progressbar;
export { Overlay, ProgressBarMode, ProgressbarSize, Progressbar_default as default };

//# sourceMappingURL=index.js.map