// Metro module 16000 (f16001).
import { useContext, useEffect } from "react";
import { MODE_CHANGE_PHYSICS } from "../../VoicePanelConstants";
import { EDGE_GUTTER } from "../card/VoicePanelCardConstants";
import { CONTROLS_HEIGHT } from "./VoicePanelControlsConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import VoicePanelStateContext from "../VoicePanelStateContext";
import useConsoleConnectingInfo from "../hooks/useConsoleConnectingInfo";
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import { TransitionStates } from "../../../../design/components/TransitionGroup/TransitionGroup";
import useControlsTranslation from "../hooks/useControlsTranslation";
import * as _spring from "../../../../design/animation/reanimated/spring/spring";
import NativeView from "../../../core/native/NativeView";
import { Icon, IconSizes } from "../../../../design/void/native";
import { Text } from "../../../../design/components/Text/native/Text";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import { disconnectRemote } from "../../../game_console/GameConsoleActionCreators";
import { intl, t } from "../../../../intl/index.native";
import { VoicePanelVisualEffectView } from "../shared/VoicePanelVisualEffectView";
let useStyles, FADE_IN_MODE_PHYSICS, __initData, __initData2, __initData3;
const VoicePanelConsoleStatus = function VoicePanelConsoleStatus(props) {
  const { wrapperSpecs, accessoryHeights, state, cleanUp } = props;
  const styles = useStyles();
  const context = useContext(VoicePanelStateContext);
  const { channelId, windowDimensions, mode } = context;
  const consoleConnectingInfo = useConsoleConnectingInfo(channelId);
  const { icon, text, color, displayCancel } = consoleConnectingInfo;
  const sharedValue = useSharedValue(false);
  useEffect(() => {
    sharedValue.set(state !== TransitionStates.YEETED);
  }, [sharedValue, state]);
  const controlsTranslation = useControlsTranslation(mode, wrapperSpecs, accessoryHeights);
  const v = function v() {
    const r3 = {
      backgroundColor: color,
      width: windowDimensions.get().width - 2 * EDGE_GUTTER,
      height: CONTROLS_HEIGHT + 36,
      borderRadius: 32,
      transform: null
    };
    const r32 = sharedValue.get() ? 0 : 100;
    const n = function n(a0) {
      if (a0 ? !sharedValue.get() : a0) {
        _ReanimatedRexport.runOnJS(cleanUp)();
      }
    };
    n.__closure = {
      shouldShow: sharedValue,
      runOnJS: _ReanimatedRexport.runOnJS,
      cleanUp
    };
    n.__workletHash = 9820708059867;
    n.__initData = __initData2;
    r3.transform = [{
      translateY: _spring.withSpring(r32, FADE_IN_MODE_PHYSICS, "respect-motion-settings", n)
    }];
    return r3;
  };
  v.__closure = {
    color,
    windowDimensions,
    EDGE_GUTTER,
    CONTROLS_HEIGHT,
    CONSOLE_STATUS_HEIGHT: 36,
    withSpring: _spring.withSpring,
    shouldShow: sharedValue,
    FADE_IN_MODE_PHYSICS,
    runOnJS: _ReanimatedRexport.runOnJS,
    cleanUp
  };
  v.__workletHash = 14156265059426;
  v.__initData = __initData;
  const animatedStyle = useAnimatedStyle(v);
  const V = function V() {
    return {
      width: windowDimensions.get().width - 2 * EDGE_GUTTER
    };
  };
  V.__closure = {
    windowDimensions,
    EDGE_GUTTER
  };
  V.__workletHash = 2418678233810;
  V.__initData = __initData3;
  const animatedStyle2 = useAnimatedStyle(V);
  return <ReanimatedRexport.View style={[styles.consoleParentContainer, controlsTranslation]}>
    <NativeView style={[styles.consoleContainer]}>
      <ReanimatedRexport.View style={animatedStyle}>
        <NativeView style={styles.consoleItemContainer}>
          <Icon source={icon} color={Module712.unsafe_rawColors.WHITE} size={IconSizes.SMALL} />
          <Text variant="text-sm/medium" color="text-overlay-light" style={styles.consoleText}>{text}</Text>
          {displayCancel ? <PressableOpacity hitSlop={4} onPress={disconnectRemote}>
            <Text variant="text-sm/medium" color="text-overlay-light">
              {intl.string(t["ETE/oC"])}
            </Text>
          </PressableOpacity> : null}
        </NativeView>
      </ReanimatedRexport.View>
    </NativeView>
    <ReanimatedRexport.View style={[styles.blockingControlCover, animatedStyle2]}>
      <VoicePanelVisualEffectView />
    </ReanimatedRexport.View>
  </ReanimatedRexport.View>;
};
useStyles = createStyles({
  consoleParentContainer: {
    zIndex: 1,
    position: "absolute",
    bottom: 0,
    overflow: "hidden",
    left: -0.5,
    right: 0,
    alignItems: "center"
  },
  consoleContainer: {
    borderRadius: Module712.modules.mobile.VOICE_PANEL_CONTROLS_BORDER_RADIUS,
    overflow: "hidden"
  },
  consoleItemContainer: {
    flexDirection: "row",
    alignItems: "center",
    height: 36,
    marginHorizontal: 18
  },
  consoleText: {
    textAlign: "left",
    marginStart: 4,
    flex: 1
  },
  blockingControlCover: {
    position: "absolute",
    bottom: 0,
    borderRadius: Module712.modules.mobile.VOICE_PANEL_CONTROLS_BORDER_RADIUS,
    flex: 1,
    height: CONTROLS_HEIGHT,
    overflow: "hidden"
  }
});
FADE_IN_MODE_PHYSICS = {
  ...MODE_CHANGE_PHYSICS,
  overshootClamping: true
};
__initData = {
  code: "function VoicePanelConsoleStatusTsx1(){const{color,windowDimensions,EDGE_GUTTER,CONTROLS_HEIGHT,CONSOLE_STATUS_HEIGHT,withSpring,shouldShow,FADE_IN_MODE_PHYSICS,runOnJS,cleanUp}=this.__closure;return{backgroundColor:color,width:windowDimensions.get().width-EDGE_GUTTER*2,height:CONTROLS_HEIGHT+CONSOLE_STATUS_HEIGHT,borderRadius:32,transform:[{translateY:withSpring(shouldShow.get()?0:100,FADE_IN_MODE_PHYSICS,'respect-motion-settings',function(finished){if(finished&&!shouldShow.get()){runOnJS(cleanUp)();}})}]};}"
};
__initData2 = {
  code: "function VoicePanelConsoleStatusTsx2(finished){const{shouldShow,runOnJS,cleanUp}=this.__closure;if(finished&&!shouldShow.get()){runOnJS(cleanUp)();}}"
};
__initData3 = {
  code: "function VoicePanelConsoleStatusTsx3(){const{windowDimensions,EDGE_GUTTER}=this.__closure;return{width:windowDimensions.get().width-EDGE_GUTTER*2};}"
};
export default VoicePanelConsoleStatus;
export const CONSOLE_STATUS_HEIGHT = 36;
export function renderVoicePanelConsoleStatus(a0, a1, a2, a3) {
  return <VoicePanelConsoleStatus key={a0} {...a1} state={a2} cleanUp={a3} />;
}