// Metro module 12482 (f12483).
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { useToken } from "../../../../design/tokens/native/useToken";
import Module712 from "../../../../_bundle/Module712";
import { MAX_REFERRALS_SENT } from "../hooks/useReferralProgramBannerDetails";
import FastImage from "../../../../components_native/common/FastImage";
import Module12483 from "../../../../_bundle/Module12483";
import Module8531, { Circle } from "../../../../_bundle/Module8531";
import Module12484 from "../../../../_bundle/Module12484";
const width = 160;
const strokeDasharray = 2 * Math.PI * 77;
const useStyles = createStyles({
  progressCircleContainer: {
    width: 160,
    height: 160,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 24
  },
  progressCircleImage: {
    position: "absolute",
    width: 93,
    height: 93,
    borderRadius: 46.5
  },
  glowImage: {
    position: "absolute",
    width: 180,
    height: 180
  }
});
export default function ProgressWheel(props) {
  const nReferralsSent = props.nReferralsSent;
  const styles = useStyles();
  return <View style={styles.progressCircleContainer}>
    {nReferralsSent === MAX_REFERRALS_SENT && <FastImage source={Module12483} style={styles.glowImage} />}
    <Module8531 width={width} height={width}>
      <Circle cx={80} cy={80} r={77} stroke={useToken(Module712.colors.BACKGROUND_MOD_STRONG)} strokeWidth={6} fill={useToken(Module712.colors.BACKGROUND_SURFACE_HIGH)} />
      <Circle cx={80} cy={80} r={77} stroke="#53ac66" strokeWidth={6} fill="transparent" strokeDasharray={strokeDasharray} strokeDashoffset={strokeDasharray * (1 - 33.3 * nReferralsSent / 100)} strokeLinecap="round" rotation={-90} origin="80, 80" />
    </Module8531>
    <FastImage source={{
      uri: Module12484
    }} style={styles.progressCircleImage} />
  </View>;
};