'use strict';

var cs = require('classnames');
var React = require('react');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var cs__default = /*#__PURE__*/_interopDefault(cs);
var React__default = /*#__PURE__*/_interopDefault(React);

const CircleProgressStyle = "E_c1bus5hc";
const CircleProgress = props => {
  const {
    percent,
    color = "#0080ff",
    className
  } = props;
  const wrapperRef = React.useRef(null);
  const childRef = React.useRef(null);
  React.useLayoutEffect(() => {
    var _a;
    (_a = wrapperRef.current) == null ? void 0 : _a.style.setProperty("--color", color);
  }, [color]);
  React.useLayoutEffect(() => {
    let deg = 0;
    const childStyle = childRef.current.style;
    if (percent <= 0.5) {
      deg = 180 * (percent / 0.5);
      childStyle.background = "white";
    } else {
      deg = 180 * ((percent - 0.5) / 0.5);
      childStyle.background = color;
    }
    childStyle.transform = `rotate(${deg}deg)`;
  }, [percent, color]);
  return /* @__PURE__ */React__default.default.createElement("div", {
    className: cs__default.default(CircleProgressStyle, className),
    ref: wrapperRef
  }, /* @__PURE__ */React__default.default.createElement("div", {
    className: "circle-inner"
  }, /* @__PURE__ */React__default.default.createElement("div", {
    className: "circle-content"
  }), /* @__PURE__ */React__default.default.createElement("div", {
    className: "circle-child",
    ref: childRef
  })));
};

exports.CircleProgress = CircleProgress;
