discord-decomp/modules/quests/native/BountiesModal/BountiesModalTimer.tsx

// Metro module 14068 (f14069).
import { useEffect, useRef } from "react";
import { View } from "react-native";
import { SMALL_BUTTON_HEIGHT } from "../../../../design/components/Button/native/ButtonConstants.native";
import ReanimatedRexport, { Easing, useSharedValue, withSequence, withDelay, useAnimatedProps, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import Module8531, { Circle } from "../../../../_bundle/Module8531";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { isAndroid } from "../../../../utils/PlatformUtils";
import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
import { Text } from "../../../../design/components/Text/native/Text";
import { CheckmarkSmallBoldIcon } from "../../../../design/components/Icon/native/redesign/generated/CheckmarkSmallBoldIcon";
const stroke = "#2ECC71";
let c9839_8 = (SMALL_BUTTON_HEIGHT - 4) / 2;
const PROGRESS_CIRCUMFERENCE = 2 * Math.PI * c9839_8;
const easing = Easing.bezier(0.15, 0.21, 0.58, 1);
const easing2 = Easing.bezier(0.61, 0, 0.58, 1);
const easing3 = Easing.bezier(0.42, 0, 0.58, 1);
const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Circle);
const useStyles = createStyles({
  progress: {
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT,
    borderRadius: Module712.radii.round,
    width: SMALL_BUTTON_HEIGHT,
    height: SMALL_BUTTON_HEIGHT
  },
  ring: {
    position: "absolute",
    transform: [{
      rotate: "-90deg"
    }]
  },
  trackPath: {
    color: Module712.colors.BACKGROUND_SURFACE_HIGHEST
  },
  countdownText: {
    color: Module712.colors.CONTROL_OVERLAY_SECONDARY_TEXT_DEFAULT,
    lineHeight: isAndroid() ? 14 : void 0
  },
  checkmarkLayer: {
    position: "absolute",
    inset: 6,
    alignItems: "center",
    justifyContent: "center"
  },
  checkmarkBackground: {
    width: 20,
    height: 20,
    backgroundColor: "#2ECC71",
    borderRadius: Module712.radii.round
  },
  checkmarkIcon: {
    width: 20,
    height: 20
  }
});
const __initData = {
  code: "function BountiesModalTimerTsx1(){const{PROGRESS_CIRCUMFERENCE,animatedProgress}=this.__closure;return{strokeDashoffset:PROGRESS_CIRCUMFERENCE-PROGRESS_CIRCUMFERENCE*animatedProgress.get()};}"
};
const __initData2 = {
  code: "function BountiesModalTimerTsx2(){const{checkmarkBackgroundScale}=this.__closure;return{transform:[{scale:checkmarkBackgroundScale.get()}]};}"
};
const __initData3 = {
  code: "function BountiesModalTimerTsx3(){const{checkmarkScale}=this.__closure;return{transform:[{scale:checkmarkScale.get()}]};}"
};
export default function BountiesModalTimer(props) {
  let r31;
  let ref;
  const { isCompleted, totalSeconds, remainingSeconds } = props;
  ref = void 0;
  const styles = useStyles();
  const r12 = isCompleted || remainingSeconds <= 0;
  let c20883_0 = r12;
  const r21 = Math.max(1, Math.ceil(remainingSeconds));
  let c20883_1 = 0;
  if (isCompleted) {
    c20883_1 = 1;
    r31 = 1;
  } else {
    const r5 = totalSeconds > 0;
    r31 = 0;
    if (r5) {
      const r3 = 1 - remainingSeconds / totalSeconds;
      c20883_1 = r3;
      r31 = r3;
    }
  }
  const sharedValue = useSharedValue(r31);
  const sharedValue2 = useSharedValue(0);
  const sharedValue3 = useSharedValue(0);
  useEffect(() => {
    sharedValue.set(withTiming(c20883_1, {
      duration: 500
    }, "animate-always"));
  }, [sharedValue, r31]);
  ref = useRef(false);
  useEffect(() => {
    const current = ref.current;
    ref.current = true;
    if (c20883_0) {
      if (current) {
        sharedValue2.set(withSequence(withTiming(1.65, {
          duration: 267,
          easing
        }), withTiming(1, {
          duration: 233,
          easing: easing2
        })));
        sharedValue3.set(withDelay(167, withSequence(withTiming(1.25, {
          duration: 167,
          easing: easing3
        }), withTiming(1, {
          duration: 333,
          easing: easing3
        }))));
      } else {
        sharedValue2.set(1);
        sharedValue3.set(1);
      }
    } else {
      sharedValue2.set(0);
      sharedValue3.set(0);
    }
  }, [r12, sharedValue2, sharedValue3]);
  const U = () => ({
    strokeDashoffset: PROGRESS_CIRCUMFERENCE - PROGRESS_CIRCUMFERENCE * sharedValue.get()
  });
  U.__closure = {
    PROGRESS_CIRCUMFERENCE,
    animatedProgress: sharedValue
  };
  U.__workletHash = 12964700773124;
  U.__initData = __initData;
  const animatedProps = useAnimatedProps(U);
  const x = () => ({
    transform: [{
      scale: sharedValue2.get()
    }]
  });
  x.__closure = {
    checkmarkBackgroundScale: sharedValue2
  };
  x.__workletHash = 10834015407160;
  x.__initData = __initData2;
  const animatedStyle = useAnimatedStyle(x);
  const G = () => ({
    transform: [{
      scale: sharedValue3.get()
    }]
  });
  G.__closure = {
    checkmarkScale: sharedValue3
  };
  G.__workletHash = 7510845920441;
  G.__initData = __initData3;
  return <View style={styles.progress}>
    <Module8531 height={SMALL_BUTTON_HEIGHT} width={SMALL_BUTTON_HEIGHT} style={styles.ring}>
      <Circle cx={SMALL_BUTTON_HEIGHT / 2} cy={SMALL_BUTTON_HEIGHT / 2} r={c9839_8} fill="none" stroke={styles.trackPath.color} strokeWidth={4} />
      <AnimatedComponent cx={SMALL_BUTTON_HEIGHT / 2} cy={SMALL_BUTTON_HEIGHT / 2} r={c9839_8} fill="none" stroke={stroke} strokeWidth={4} strokeDasharray={PROGRESS_CIRCUMFERENCE} strokeLinecap="round" animatedProps={animatedProps} />
    </Module8531>
    {r12 ? !r12 : <Text variant="text-sm/semibold" style={styles.countdownText} maxFontSizeMultiplier={1}>{r21}</Text>}
    <ReanimatedRexport.View style={[styles.checkmarkLayer, animatedStyle]}>
      <View style={styles.checkmarkBackground} />
    </ReanimatedRexport.View>
    <ReanimatedRexport.View style={[styles.checkmarkLayer, useAnimatedStyle(G)]}>
      <CheckmarkSmallBoldIcon size="custom" color={Module712.colors.CONTROL_OVERLAY_PRIMARY_TEXT_DEFAULT} style={styles.checkmarkIcon} />
    </ReanimatedRexport.View>
  </View>;
};