// Metro module 11685 (f11686).
import { Component } from "react";
import { View } from "react-native";
import { createLegacyClassComponentStyles } from "../../../../design/components/Styles/native/createStyles";
import { ThemeContext } from "../../../../_bundle/Module3901";
import Module712 from "../../../../_bundle/Module712";
import Module8531, { Circle } from "../../../../_bundle/Module8531";
const styles = createLegacyClassComponentStyles({
  progressCircle: {
    alignItems: "center",
    justifyContent: "center"
  },
  circle: {
    position: "absolute",
    width: "100%",
    height: "100%"
  },
  circleOverlay: {
    position: "relative",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  }
});
class ProgressCircle extends Component {
  static contextType = ThemeContext;
  static defaultProps = {
    size: 20,
    strokeWidth: 0.9,
    color: Module712.unsafe_rawColors.GUILD_BOOSTING_PINK
  };
  renderCircle() {
    const r17 = styles(this.context);
    const props = this.props;
    const { percent, color, size, strokeWidth } = props;
    const r31 = Math.min(Math.max(percent, 0), 100);
    const r2 = (size - strokeWidth) / 2;
    const strokeDasharray = r2 * Math.PI * 2;
    return <Module8531 viewBox={`0 0 ${size} ${size}`} style={r17.circle}>
      <Circle fill="none" cx={size / 2} cy={size / 2} r={r2} strokeWidth={strokeWidth} strokeLinecap="round" transform={`rotate(-90 ${size / 2} ${size / 2})`} stroke={color} style={{
        strokeDasharray,
        strokeDashoffset: (1 - r31 / 100) * strokeDasharray
      }} />
    </Module8531>;
  }
  render() {
    const r10 = styles(this.context);
    const props = this.props;
    const { style, children } = props;
    return <View style={[r10.progressCircle, style]}>
      {this.renderCircle()}
      {children != null ? <View style={r10.circleOverlay}>{children}</View> : null}
    </View>;
  }
}
export default ProgressCircle;