// Metro module 11409 (f11410).
import { useRef, useEffect } from "react";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useMobileVisualRefreshConfig } from "../../../themes/experiments/MobileVisualRefreshExperiment";
import { useToken } from "../../../../design/tokens/native/useToken";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { isIOS } from "../../../../utils/PlatformUtils";
import ReanimatedRexport, { FadeOut } from "../../../reanimated/ReanimatedRexport";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import LottieAnimationView from "../../../../components_native/common/LottieAnimationView";
const useStyles = createStyles((a0, a1) => ({
  container: {
    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
    width: a0,
    height: a0,
    borderRadius: Module712.radii.round,
    marginHorizontal: a1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  containerRefresh: {
    width: a0,
    height: a0,
    borderRadius: Module712.radii.sm,
    marginHorizontal: a1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  animation: {
    width: 30,
    height: 30
  },
  animationRefresh: {
    width: 24,
    height: 24
  }
}));
export function PremiumAnimatedGiftButton(props) {
  let active = props.active;
  const { style, activeStyle, disabled, accessibilityState, channelId, animationDataUrl, onAnimationFinished, loop } = props;
  const enabled = useMobileVisualRefreshConfig({
    location: "PremiumAnimatedGiftButton"
  }).enabled;
  const token = useToken(Module712.modules.mobile.CHAT_INPUT_ACTION_BUTTON_SIZE);
  const token2 = useToken(Module712.modules.mobile.CHAT_INPUT_ACTION_BUTTON_MARGIN);
  const token3 = useToken(Module712.modules.mobile.CHAT_INPUT_BUTTON_MIN_TOUCH_TARGET_SIZE);
  const styles = useStyles(token, token2);
  const r63 = Math.max(0, (token3 - token) / 2);
  const ref = useRef(null);
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  useEffect(() => {
    if (!stateFromStores) {
      if (isIOS() && ref != null) {
        const current = ref.current;
        if (current != null) {
          current.reset();
        }
      }
      if (ref != null) {
        const current2 = ref.current;
        if (current2 != null) {
          current2.play();
        }
      }
    }
  }, [channelId, stateFromStores]);
  const exiting = stateFromStores ? void 0 : FadeOut;
  const style2 = [enabled ? styles.containerRefresh : styles.container, style, ,];
  if (active) {
    active = !disabled;
  }
  if (active) {
    active = activeStyle;
  }
  style2[2] = active;
  return <ReanimatedRexport.View exiting={exiting}>
    <PressableOpacity style={style2} hitSlop={r63 > 0 ? r63 : void 0} accessibilityRole="button" accessibilityState={{
      disabled,
      ...accessibilityState
    }} {...props}>
      <LottieAnimationView ref={ref} style={enabled ? styles.animationRefresh : styles.animation} source={{
        uri: animationDataUrl
      }} loop={loop} autoPlay={false} onAnimationFinish={onAnimationFinished} />
    </PressableOpacity>
  </ReanimatedRexport.View>;
}