// Metro module 12031 (f12032).
import { View, Pressable } from "react-native";
import ApplicationStreamingStore from "../../../../stores/ApplicationStreamingStore";
import AuthenticationStore from "../../../../stores/AuthenticationStore";
import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useFetchStreamPreview from "../../../go_live/useFetchStreamPreview";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { encodeStreamKey } from "../../../go_live/utils/StreamKeyUtils";
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Pressable);
const AnimatedComponent2 = ReanimatedRexport.createAnimatedComponent(Button);
const OPACITY_TIMING = {
  duration: 200
};
const useStyles = createStyles({
  roundedCard: {
    position: "absolute",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: "100%",
    backgroundColor: Module712.colors.VOICE_VIDEO_VIDEO_TILE_BACKGROUND
  },
  streamPreviewImage: {
    position: "absolute",
    width: "100%",
    height: "100%",
    opacity: 0.5
  },
  ownStreamTextContainer: {
    backgroundColor: Module712.colors.BACKGROUND_SCRIM,
    borderRadius: Module712.radii.sm,
    marginHorizontal: Module712.space.PX_16
  },
  ownStreamText: {
    textAlign: "center",
    paddingHorizontal: Module712.space.PX_16,
    paddingVertical: Module712.space.PX_16
  }
});
const __initData = {
  code: "function VoicePanelStreamPreviewTsx1(){const{mode,withTiming,OPACITY_TIMING}=this.__closure;if(mode==null){return{opacity:1};}return{opacity:withTiming(mode.get()==='pip'?0:1,OPACITY_TIMING)};}"
};
export function VoicePanelStreamPreview(props) {
  const { mode, stream, disabled, onPress, layout } = props;
  const styles = useStyles();
  const previewUrl = useFetchStreamPreview(stream?.guildId, stream?.channelId, stream?.ownerId).previewUrl;
  const stateFromStores = useStateFromStores([ApplicationStreamingStore, AuthenticationStore], () => stream != null && stream.ownerId === AuthenticationStore.getId() && ApplicationStreamingStore.getStreamerActiveStreamMetadataForStream(encodeStreamKey(stream)) == null, [stream]);
  const T = function T() {
    return mode == null ? {
      opacity: 1
    } : {
      opacity: _timing.withTiming(mode.get() === "pip" ? 0 : 1, OPACITY_TIMING)
    };
  };
  T.__closure = {
    mode,
    withTiming: _timing.withTiming,
    OPACITY_TIMING
  };
  T.__workletHash = 15496474861955;
  T.__initData = __initData;
  return <AnimatedComponent layout={layout} onPress={onPress} style={styles.roundedCard} disabled={disabled || stateFromStores} accessible={false}>
    {previewUrl != null ? <ReanimatedRexport.Image layout={layout} source={{
      uri: previewUrl
    }} style={styles.streamPreviewImage} resizeMode="cover" /> : null}
    <ReanimatedNativeView style={useAnimatedStyle(T)} layout={layout}>
      {stateFromStores ? <View style={styles.ownStreamTextContainer}>
        <Text variant="text-sm/semibold" color="text-overlay-light" style={styles.ownStreamText}>
          {intl.string(t["ro/HN8"])}
        </Text>
      </View> : <AnimatedComponent2 layout={layout} disabled={disabled} text={intl.string(t["7Xq/nV"])} size="sm" variant="primary-overlay" onPress={onPress} />}
    </ReanimatedNativeView>
  </AnimatedComponent>;
}