// Metro module 15739 (f15740).
import { useState, useRef, useEffect } from "react";
import { TouchableOpacity, View, StyleSheet } from "react-native";
import { ContentDismissActionType } from "../../../dismissible_content/DismissibleContentConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { BACKDROP_OPACITY } from "./BurstReactionEffectUtils";
import { triggerHapticFeedback } from "../../../haptics/HapticUtils.native";
import HapticFeedbackTypes from "../../../haptics/HapticFeedbackTypes";
import Dispatcher from "../../../../Dispatcher";
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
import SelectedDismissibleContent from "../../../dismissible_content/native/SelectedDismissibleContent";
import { DismissibleContent } from "../../../../_bundle/Module1358";
import { OverlayView } from "../../../../design/void/native";
import BurstReactionAnimation from "./BurstReactionAnimation";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { ThemeContextProvider } from "../../../../_bundle/Module3901";
let useStyles, __initData, __initData2;
const BurstReactionAnimationContainerInner = function BurstReactionAnimationContainerInner() {
  let styles, ref, animatedStyle;
  const handleComponentFinish2 = function handleComponentFinish() {
    if (ref.current === false) {
      setState(null);
    }
  };
  styles = useStyles();
  const [state, setState] = useState(null);
  const [state2, setState2] = useState(false);
  ref = useRef(false);
  useEffect(() => {
    const handleEffectReceived2 = function handleEffectReceived(a0) {
      setState({
        channelId: a0.channelId,
        emoji: a0.emoji,
        messageId: a0.messageId
      });
      setState2(true);
      ref.current = true;
      triggerHapticFeedback(HapticFeedbackTypes.IMPACT_HEAVY);
    };
    Dispatcher.subscribe("BURST_REACTION_EFFECT_SEND", handleEffectReceived2);
    return () => {
      Dispatcher.unsubscribe("BURST_REACTION_EFFECT_SEND", handleEffectReceived2);
    };
  }, []);
  const y = function y() {
    let r29;
    if (state == null) {
      r29 = {
        opacity: 0
      };
    } else {
      const r3 = {
        opacity: null
      };
      const r21 = {
        duration: 300
      };
      if (state2) {
        r3.opacity = _timing.withTiming(1, r21);
        r29 = r3;
      } else {
        const n = function n(a0) {
          if (a0) {
            _ReanimatedRexport.runOnJS(handleComponentFinish2)();
          }
        };
        n.__closure = {
          runOnJS: _ReanimatedRexport.runOnJS,
          handleComponentFinish: handleComponentFinish2
        };
        n.__workletHash = 9326347209552;
        n.__initData = __initData2;
        r3.opacity = _timing.withTiming(0, r21, "respect-motion-settings", n);
        r29 = r3;
      }
    }
    return r29;
  };
  y.__closure = {
    animationData: state,
    showAnimation: state2,
    withTiming: _timing.withTiming,
    runOnJS: _ReanimatedRexport.runOnJS,
    handleComponentFinish: handleComponentFinish2
  };
  y.__workletHash = 12044515783370;
  y.__initData = __initData;
  animatedStyle = useAnimatedStyle(y);
  return state == null ? null : <SelectedDismissibleContent contentTypes={[DismissibleContent.SUPER_REACTIONS_MOBILE_FULLSCREEN_TAP_TO_DISMISS]}>
    {({ visibleContent, markAsDismissed }) => <OverlayView style={styles.fill}>
      <ReanimatedRexport.View style={[styles.fill, animatedStyle]}>
        <TouchableOpacity activeOpacity={BACKDROP_OPACITY} onPress={() => {
          setState2(false);
          ref.current = false;
          markAsDismissed(ContentDismissActionType.UNKNOWN);
        }} style={styles.fill}>
          <View style={styles.background} />
          <View style={styles.fill}>
            {state2 ? <BurstReactionAnimation isFullscreen channelId={state.channelId} messageId={state.messageId} emoji={state.emoji} loop={false} withFadeOut={false} onComplete={() => {
              setState2(false);
              ref.current = false;
            }} /> : null}
          </View>
          {visibleContent === DismissibleContent.SUPER_REACTIONS_MOBILE_FULLSCREEN_TAP_TO_DISMISS && <>
            <Text style={styles.dismissTextContainer} variant="text-sm/medium">
              {intl.string(t.QpPMih)}
            </Text>
            <View style={styles.dismissTextBackground} />
          </>}
        </TouchableOpacity>
      </ReanimatedRexport.View>
    </OverlayView>}
  </SelectedDismissibleContent>;
};
useStyles = createStyles({
  background: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: Module712.colors.BLACK,
    opacity: BACKDROP_OPACITY
  },
  fill: {
    ...StyleSheet.absoluteFillObject,
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  dismissTextContainer: {
    position: "absolute",
    bottom: 48,
    zIndex: 1
  },
  dismissTextBackground: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST,
    borderRadius: Module712.radii.round,
    position: "absolute",
    bottom: -600,
    height: 700,
    width: 700
  }
});
__initData = {
  code: "function BurstReactionAnimationContainerTsx1(){const{animationData,showAnimation,withTiming,runOnJS,handleComponentFinish}=this.__closure;if(animationData==null){return{opacity:0};}if(!showAnimation){return{opacity:withTiming(0,{duration:300},'respect-motion-settings',function(finished){if(finished)runOnJS(handleComponentFinish)();})};}return{opacity:withTiming(1,{duration:300})};}"
};
__initData2 = {
  code: "function BurstReactionAnimationContainerTsx2(finished){const{runOnJS,handleComponentFinish}=this.__closure;if(finished)runOnJS(handleComponentFinish)();}"
};
export default function BurstReactionAnimationContainer() {
  return <ThemeContextProvider theme={Module712.themes.DARKER}>
    <BurstReactionAnimationContainerInner />
  </ThemeContextProvider>;
};