// Metro module 11402 (f11403).
import { StyleSheet, View } from "react-native";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { SMALL_BUTTON_HEIGHT, SMALL_BUTTON_PADDING } from "../../../../design/components/Button/native/ButtonConstants.native";
import Module712 from "../../../../_bundle/Module712";
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
import * as _timingPresets from "../../../../design/animation/reanimated/timing/timingPresets";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { useGradientBottom } from "../../../client_themes/native/ClientThemesOverrides";
import useAppLauncherOnboardingContent from "./hooks/useAppLauncherOnboardingContent";
import ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
import LottieAnimationView from "../../../../components_native/common/LottieAnimationView";
import * as _Module11403 from "../../../../_bundle/Module11403";
import * as _Module11236 from "../../../../_bundle/Module11236";
let EnteringAnimation, ExitingAnimation;
const useStyles = createStyles(() => {
  const width = SMALL_BUTTON_HEIGHT + SMALL_BUTTON_PADDING + 2;
  return {
    fakeButton: {
      zIndex: 3,
      borderWidth: 1.5,
      borderColor: Module712.colors.BACKGROUND_BRAND,
      borderRadius: Module712.radii.round,
      alignItems: "center",
      justifyContent: "center",
      width,
      height: width,
      marginLeft: 4
    },
    glowMask: {
      zIndex: 1,
      position: "absolute",
      borderRadius: Module712.radii.round,
      top: 0,
      left: 0,
      width,
      height: width,
      backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
      marginLeft: 4
    },
    glowLottie: {
      width: "150%",
      height: "150%",
      position: "absolute",
      top: "-25%",
      left: "-25%",
      zIndex: 0,
      opacity: 0.8
    },
    trinketsLottie: {
      zIndex: 4,
      position: "absolute",
      pointerEvents: "none",
      width: "175%",
      height: "175%",
      top: "-43%",
      left: "-38%"
    },
    glowAnimation: {
      pointerEvents: "none"
    }
  };
});
const EnteringAnimation2 = function EnteringAnimation() {
  return {
    initialValues: {
      opacity: 0
    },
    animations: {
      opacity: _timing.withTiming(1, _timingPresets.timingStandard)
    }
  };
};
EnteringAnimation2.__closure = {
  withTiming: _timing.withTiming,
  timingStandard: _timingPresets.timingStandard
};
EnteringAnimation2.__workletHash = 2327377243473;
EnteringAnimation2.__initData = {
  code: "function EnteringAnimation_AppLauncherOnboardingChatInputButtonAnimationTsx1(){const{withTiming,timingStandard}=this.__closure;const initialValues={opacity:0};const animations={opacity:withTiming(1,timingStandard)};return{initialValues:initialValues,animations:animations};}"
};
EnteringAnimation = EnteringAnimation2;
const ExitingAnimation2 = function ExitingAnimation() {
  return {
    initialValues: {
      opacity: 1
    },
    animations: {
      opacity: _timing.withTiming(0, _timingPresets.timingStandard)
    }
  };
};
ExitingAnimation2.__closure = {
  withTiming: _timing.withTiming,
  timingStandard: _timingPresets.timingStandard
};
ExitingAnimation2.__workletHash = 1065249287738;
ExitingAnimation2.__initData = {
  code: "function ExitingAnimation_AppLauncherOnboardingChatInputButtonAnimationTsx2(){const{withTiming,timingStandard}=this.__closure;const initialValues={opacity:1};const animations={opacity:withTiming(0,timingStandard)};return{initialValues:initialValues,animations:animations};}"
};
ExitingAnimation = ExitingAnimation2;
export const APP_LAUNCHER_ONBOARDING_CHAT_INPUT_BUTTON_ANIMATION_DURATION_MS = 7000;
export function AppLauncherOnboardingChatInputButtonAnimation(props) {
  const channelId = props.channelId;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const gradientBottom = useGradientBottom();
  useAppLauncherOnboardingContent({
    channelId
  });
  return <>
    <ReanimatedRexport.View entering={EnteringAnimation} exiting={ExitingAnimation} style={[StyleSheet.absoluteFill, styles.glowAnimation]} collapsable={false}>
      <LottieAnimationView collapsable={false} style={styles.glowLottie} source={_Module11403} autoPlay={!stateFromStores} />
      <View collapsable={false} style={[styles.glowMask, gradientBottom]} />
      <View collapsable={false} style={styles.fakeButton} />
    </ReanimatedRexport.View>
    <LottieAnimationView collapsable={false} style={styles.trinketsLottie} source={_Module11236} autoPlay={!stateFromStores} />
  </>;
}