// Metro module 10808 (f10809).
import { Image as Image2, View } from "react-native";
import ApplicationStreamingStore from "../../../../stores/ApplicationStreamingStore";
import AuthenticationStore from "../../../../stores/AuthenticationStore";
import { MediaEngineContextTypes } from "../../../../_bundle/Module4250";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { Icon } from "../../../../design/void/native";
import Module10809 from "../../../../_bundle/Module10809";
import Module10810 from "../../../../_bundle/Module10810";
import { FormSwitch, FormRow, FormLabel } from "../../../../design/void/Form/native/index";
import { useStateFromStores } from "../../../../_bundle/Module589";
import useMuteAwareLocalVolume from "../../../media_engine/useMuteAwareLocalVolume";
import { intl, t } from "../../../../intl/index.native";
import VolumeSlider from "../../../../components_native/common/VolumeSlider";
import { isAndroid } from "../../../../utils/PlatformUtils";
import { useMaskedSpeakerStates } from "../../../voice_calls/native/CallsUtils";
import { showAudioOutputSelector } from "../../../voice_calls/native/audio_output_selector/showAudioOutputSelector";
import useScreenshareUtils from "../useScreenshareUtils";
import useDeafStates from "../../useDeafStates";
import { createDeafHandler } from "../VoiceActionUtils";
import Module10813 from "../../../../_bundle/Module10813";
import Module10814 from "../../../../_bundle/Module10814";
let useStyles, ExpandedControlItem;
const ExpandedControlItemIcon = function ExpandedControlItemIcon(props) {
  const { iconSource, showIconSparkle } = props;
  const styles = useStyles();
  if (iconSource == null) {
    return null;
  }
  const r23 = <Icon size={Icon.Sizes.MEDIUM} source={iconSource} style={styles.formTintColor} disableColor />;
  return showIconSparkle ? <View>
    {r23}
    <Image2 style={styles.sparkle2} source={Module10809} />
    <Image2 style={styles.sparkle} source={Module10810} />
  </View> : r23;
};
ExpandedControlItem = function ExpandedControlItem(props) {
  const { disabled, iconSource, showIconSparkle = false, label, onPress: onPress2, onSwitchValueChange, switchValue } = props;
  let trailing = props.trailing;
  const styles = useStyles();
  if (trailing == null && switchValue != null) {
    trailing = <FormSwitch tintColor={Module712.unsafe_rawColors.BRAND_500} renderIosBackground value={switchValue} disabled={disabled} onValueChange={onSwitchValueChange} />;
  }
  return <FormRow disabled={disabled} leading={<ExpandedControlItemIcon iconSource={iconSource} showIconSparkle={showIconSparkle} />} label={<FormLabel text={label} style={styles.formColor} />} onPress={onPress2} trailing={trailing} />;
};
useStyles = createStyles({
  formTintColor: {
    tintColor: Module712.colors.ICON_STRONG
  },
  formColor: {
    color: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY
  },
  sparkle: {
    position: "absolute",
    bottom: -4,
    right: "70%"
  },
  sparkle2: {
    position: "absolute",
    right: -5,
    height: 10,
    width: 10
  }
});
export function StreamVolumeItem() {
  const styles = useStyles();
  const stateFromStores = useStateFromStores([ApplicationStreamingStore, AuthenticationStore], () => {
    const lastActiveStream = ApplicationStreamingStore.getLastActiveStream();
    return lastActiveStream != null ? lastActiveStream.ownerId !== AuthenticationStore.getId() ? lastActiveStream : null : null;
  });
  const muteAwareLocalVolume = useMuteAwareLocalVolume(stateFromStores?.ownerId, MediaEngineContextTypes.STREAM);
  const { effectiveVolume, handleVolumeChange } = muteAwareLocalVolume;
  const label = <>
    {[<FormLabel text={intl.string(t.pEAl4b)} style={[styles.formColor, {
      marginBottom: 16
    }]} />, <VolumeSlider onResponderGrant={isAndroid() ? () => true : void 0} value={effectiveVolume} onValueChange={handleVolumeChange} color={Module712.unsafe_rawColors.WHITE} maxTrackTintColor={Module712.unsafe_rawColors.PRIMARY_300} />]}
  </>;
  return stateFromStores != null ? <FormRow label={label} /> : null;
}
export function AudioRouteButton(props) {
  const { channelId, isConnectedToVoiceChannel } = props;
  return <ExpandedControlItem onPress={() => {
    showAudioOutputSelector(channelId, isConnectedToVoiceChannel);
  }} iconSource={useMaskedSpeakerStates().routeSource} label={intl.string(t["A/Ly/2"])} />;
}
export function ScreenshareButton(props) {
  const { channel, disabled } = props;
  const screenshareUtils = useScreenshareUtils(channel);
  const { onPress: onPress2, imgSource, text, isFeatureEnabled } = screenshareUtils;
  return <ExpandedControlItem disabled={isFeatureEnabled ? disabled : !isFeatureEnabled} onPress={onPress2} iconSource={imgSource} label={text} />;
}
export function DeafenButton(props) {
  const { channel, disabled = false } = props;
  const deafHandler = createDeafHandler(useDeafStates(channel));
  return <ExpandedControlItem disabled={disabled} onPress={deafHandler.onPress} iconSource={deafHandler.deaf ? Module10813 : Module10814} label={intl.string(t.wjcRFX)} />;
}