/**
 * 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.
 */

const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_devtools = require("../../global/js/utils/devtools.js");
const require_index$1 = require("../../node_modules/@carbon/colors/lib/index.js");
const require_clamp = require("../../global/js/utils/clamp.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(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__ */ require_runtime.__toESM(require_index.default);
var import_lib = require_index$1.default;
const blockClass = `${require_settings.pkg.prefix}--checklist__chart`;
const componentName = "ChecklistChart";
const defaults = { theme: "light" };
/**
* Custom chart component used within Checklist PLG component
*/
let ChecklistChart = react.default.forwardRef(
	/**
	* @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
	*/
	({ className, value, theme = defaults.theme, ...rest }, ref) => {
		const numDegrees = require_clamp.clamp(value * 360, 0, 360);
		const circleColor = theme === "light" ? import_lib.gray20 : import_lib.gray70;
		const progressColor = import_lib.purple50;
		(0, react.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.default.createElement("div", {
			...rest,
			className: (0, import_classnames.default)(blockClass, className),
			ref,
			role: "img",
			...require_devtools.getDevtoolsProps(componentName)
		});
	}
);
ChecklistChart.displayName = componentName;
ChecklistChart.propTypes = {
	/**
	* Optional class name for this component.
	*/
	className: prop_types.default.string,
	/**
	* Determines the theme of the component.
	*/
	theme: prop_types.default.oneOf(["light", "dark"]),
	/**
	* Number between 0 and 1.
	*/
	value: prop_types.default.number.isRequired
};
//#endregion
exports.ChecklistChart = ChecklistChart;
