// Metro module 11482 (f11483).
import { useEffect } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import { useDiceRollState } from "../DiceRollStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import ReanimatedRexport, { useSharedValue, withRepeat, Easing, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import * as _timing from "../../../design/animation/reanimated/timing/timing";
import * as _native from "../../../design/void/native";
import { getBarText } from "../DiceRollUtils";
import { DiceIcon } from "../../../design/components/Icon/native/redesign/generated/DiceIcon";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  animatedContainer: {
    overflow: "hidden"
  },
  container: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
    paddingVertical: 8,
    gap: 12,
    borderTopWidth: 1,
    borderColor: Module712.colors.BORDER_SUBTLE,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  }
});
const __initData = {
  code: "function DiceRollBarTsx1(){const{useReducedMotion,height,opacity,withTiming,ANIMATION_DURATION_MS,DECELERATED_EASING}=this.__closure;if(useReducedMotion){return{height:height.get(),opacity:opacity.get()};}return{height:withTiming(height.get(),{duration:ANIMATION_DURATION_MS,easing:DECELERATED_EASING}),opacity:withTiming(opacity.get(),{duration:ANIMATION_DURATION_MS,easing:DECELERATED_EASING})};}"
};
const __initData2 = {
  code: "function DiceRollBarTsx2(){const{rotation}=this.__closure;return{transform:[{rotate:rotation.get()+\"deg\"}]};}"
};
export default function DiceRollBar(props) {
  let sharedValue, sharedValue2, sharedValue3, c18885_4, c18885_5;
  const channelId = props.channelId;
  sharedValue = void 0;
  sharedValue2 = void 0;
  sharedValue3 = void 0;
  c18885_4 = void 0;
  c18885_5 = void 0;
  const styles = useStyles();
  const diceRollState = useDiceRollState(channelId);
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  sharedValue = useSharedValue(0);
  sharedValue2 = useSharedValue(0);
  sharedValue3 = useSharedValue(0);
  const r2 = diceRollState != null && !diceRollState.dismissing;
  c18885_4 = r2;
  let r36 = diceRollState?.rolling;
  if (r36 == null) {
    r36 = false;
  }
  c18885_5 = r36;
  useEffect(() => {
    sharedValue.set(c18885_4 ? 56 : 0);
    sharedValue2.set(c18885_4 ? 1 : 0);
  }, [r2, sharedValue, sharedValue2]);
  useEffect(() => {
    if (c18885_5 && !stateFromStores) {
      sharedValue3.set(withRepeat(_timing.withTiming(360, {
        duration: 800,
        easing: Easing.linear
      }), -1, false));
    } else {
      sharedValue3.set(0);
    }
  }, [r36, stateFromStores, sharedValue3]);
  const w = function w() {
    let r29;
    const r2 = {
      height: null,
      opacity: null
    };
    if (stateFromStores) {
      r2.height = sharedValue.get();
      r2.opacity = sharedValue2.get();
      r29 = r2;
    } else {
      r2.height = _timing.withTiming(sharedValue.get(), {
        duration: 300,
        easing: _native.DECELERATED_EASING
      });
      r2.opacity = _timing.withTiming(sharedValue2.get(), {
        duration: 300,
        easing: _native.DECELERATED_EASING
      });
      r29 = r2;
    }
    return r29;
  };
  w.__closure = {
    useReducedMotion: stateFromStores,
    height: sharedValue,
    opacity: sharedValue2,
    withTiming: _timing.withTiming,
    ANIMATION_DURATION_MS: 300,
    DECELERATED_EASING: _native.DECELERATED_EASING
  };
  w.__workletHash = 2405066513233;
  w.__initData = __initData;
  const animatedStyle = useAnimatedStyle(w);
  const r62 = () => ({
    transform: [{
      rotate: `${sharedValue3.get()}deg`
    }]
  });
  r62.__closure = {
    rotation: sharedValue3
  };
  r62.__workletHash = 12265072947874;
  r62.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(r62);
  if (diceRollState == null) {
    return null;
  }
  return <ReanimatedRexport.View style={[animatedStyle, styles.animatedContainer]}>
    <View style={styles.container}>
      <ReanimatedRexport.View style={animatedStyle2}>
        <DiceIcon size="md" />
      </ReanimatedRexport.View>
      <Text variant="text-sm/normal" color="text-default">
        {getBarText(r36, diceRollState.results)}
      </Text>
    </View>
  </ReanimatedRexport.View>;
};