/**
 * Copyright IBM Corp. 2020, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import { gray20, gray70, purple50 } from "../../node_modules/@carbon/colors/es/index.js";
import { clamp } from "../../global/js/utils/clamp.js";
import React, { useEffect } from "react";
import PropTypes from "prop-types";
//#region src/components/Checklist/ChecklistChart.jsx
/**
* Copyright IBM Corp. 2023, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const blockClass = `${pkg.prefix}--checklist__chart`;
const componentName = "ChecklistChart";
const defaults = { theme: "light" };
/**
* Custom chart component used within Checklist PLG component
*/
let ChecklistChart = React.forwardRef(
	/**
	* @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
	*/
	({ className, value, theme = defaults.theme, ...rest }, ref) => {
		const numDegrees = clamp(value * 360, 0, 360);
		const circleColor = theme === "light" ? gray20 : gray70;
		const progressColor = purple50;
		useEffect(() => {
			const ele = document.getElementsByClassName(`${blockClass}`);
			setTimeout(() => {
				for (const el of ele) if (el instanceof HTMLElement) {
					el.style.setProperty("background-image", `conic-gradient(${progressColor} ${numDegrees}deg, ${circleColor} ${numDegrees}deg 360deg)`);
					el.style.setProperty("border-radius", "50%");
				}
			}, 0);
		});
		return /* @__PURE__ */ React.createElement("div", {
			...rest,
			className: (0, import_classnames.default)(blockClass, className),
			ref,
			role: "img",
			...getDevtoolsProps(componentName)
		});
	}
);
ChecklistChart.displayName = componentName;
ChecklistChart.propTypes = {
	/**
	* Optional class name for this component.
	*/
	className: PropTypes.string,
	/**
	* Determines the theme of the component.
	*/
	theme: PropTypes.oneOf(["light", "dark"]),
	/**
	* Number between 0 and 1.
	*/
	value: PropTypes.number.isRequired
};
//#endregion
export { ChecklistChart };
