// Metro module 10770 (f10771).
import { useRef, useState, useEffect, useCallback } from "react";
import { View } from "react-native";
import MediaEngineStore from "../../stores/MediaEngineStore";
import SpeakingStore from "../../stores/SpeakingStore";
import AppStateStore from "../../stores/native/AppStateStore";
import { AppStates } from "../../Constants";
import { NativePermissionTypes } from "../../modules/native_permissions/NativePermissionConstants";
import { createStyles } from "../../design/components/Styles/native/createStyles";
import Module712 from "../../_bundle/Module712";
import { hexWithOpacity } from "../../utils/ColorUtils";
import useWindowDimensions_native from "../../modules/screen/useWindowDimensions.native";
import { useStateFromStores } from "../../_bundle/Module589";
import NativePermissionUtils from "../../modules/native_permissions/NativePermissionUtils";
import { MediaEngineEvent } from "../../_bundle/Module4286";
import { AccessibilityAnnouncer } from "../../_bundle/Module3902";
import { intl, t } from "../../intl/index.native";
import { AccessibilityFocusView } from "../../design/void/native";
import { FormHint } from "../../design/void/Form/native/index";
import Module7659 from "../../_bundle/Module7659";
import { isAndroid } from "../../utils/PlatformUtils";
const useStyles = createStyles({
  sensitivity: {
    position: "relative",
    height: 20
  },
  sensitivityBar: {
    position: "absolute",
    top: 7,
    left: 0,
    right: 0,
    bottom: 7,
    flexDirection: "row"
  },
  sensitivityFill: {
    position: "absolute",
    backgroundColor: Module712.unsafe_rawColors.WHITE,
    opacity: 0.5,
    top: 7,
    left: 0,
    right: 0,
    bottom: 7
  },
  sensitivityCommon: {
    height: 6,
    borderRadius: 3
  },
  sensitivityMin: {
    backgroundColor: Module712.unsafe_rawColors.YELLOW_300
  },
  sensitivityMax: {
    backgroundColor: Module712.unsafe_rawColors.GREEN_360
  },
  sensitivityDefault: {
    flex: 1,
    backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.PRIMARY_400, 0.6)
  },
  sensitivitySpeaking: {
    flex: 1,
    backgroundColor: Module712.unsafe_rawColors.GREEN_360
  },
  sensitivitySlider: {
    flex: 1,
    backgroundColor: "transparent",
    marginVertical: -10
  }
});
export default function VoiceSensitivity(props) {
  let state2, setState2, state3, setState3, setState4, setState5, callback, ref, ref2, ref3;
  const { auto, threshold, onThresholdChange } = props;
  state2 = void 0;
  setState2 = void 0;
  state3 = void 0;
  setState3 = void 0;
  setState4 = void 0;
  setState5 = void 0;
  callback = void 0;
  ref = void 0;
  ref2 = void 0;
  ref3 = void 0;
  const styles = useStyles();
  const value = threshold + 100;
  const ref5 = useRef(null);
  const ref6 = useRef(null);
  const ref4 = useRef(null);
  const [state, setState] = useState(SpeakingStore.isCurrentUserSpeaking());
  const width = useWindowDimensions_native().width;
  const stateFromStores = useStateFromStores([AppStateStore], () => AppStateStore.getState(), []);
  [state2, setState2] = useState(0);
  [state3, setState3] = useState(value);
  let flex;
  [flex, setState4] = useState(state3 / 100);
  let left;
  [left, setState5] = useState(width * (1 - state2 / -100));
  useEffect(() => {
    if (!auto) {
      setState4(state3 / 100);
    }
  }, [auto, state3]);
  useEffect(() => {
    if (!auto) {
      setState5(width * (1 - state2 / -100));
    }
  }, [auto, state2, width]);
  callback = useCallback((a0, a1) => {
    setState(a1);
    setState2(a0);
  }, []);
  const callback2 = useCallback((a0) => {
    setState3(a0);
  }, []);
  useEffect(() => {
    let c26810_0;
    let _listenOnlyIfWeHavePermission2 = function _listenOnlyIfWeHavePermission() {
      const r9 = async () => {
        let c31590_0;
        c31590_0 = void 0;
        if (await NativePermissionUtils.hasPermission(NativePermissionTypes.AUDIO, {
          showAuthorizationError: false
        }) && !c26810_0) {
          MediaEngineStore.getMediaEngine().on(MediaEngineEvent.VoiceActivity, callback);
        }
      };
      _listenOnlyIfWeHavePermission2 = r9;
      return r9.apply(this, arguments);
    };
    if (stateFromStores === AppStates.ACTIVE) {
      c26810_0 = false;
      (function listenOnlyIfWeHavePermission() {
        return _listenOnlyIfWeHavePermission2.apply(this, arguments);
      })();
      return () => {
        c26810_0 = true;
        MediaEngineStore.getMediaEngine().removeListener(MediaEngineEvent.VoiceActivity, callback);
      };
    }
  }, [callback, stateFromStores]);
  ref = useRef(false);
  ref2 = useRef(false);
  ref3 = useRef(null);
  useEffect(() => {
    if (ref.current) {
      if (auto) {
        if (ref2.current) {
          if (state) {
            if (ref3.current != null) {
              clearTimeout(ref3.current);
              ref3.current = null;
            }
            AccessibilityAnnouncer.announce(intl.string(t.haLKZ0));
          } else {
            ref3.current = setTimeout(() => {
              ref3.current = null;
              AccessibilityAnnouncer.announce(intl.string(t.X2hJL7));
            }, 1000);
          }
          return () => {
            if (ref3.current != null) {
              clearTimeout(ref3.current);
              ref3.current = null;
            }
          };
        }
      } else {
        ref2.current = false;
      }
    } else {
      ref.current = true;
    }
  }, [auto, state]);
  if (auto) {
    const r142 = state ? styles.sensitivitySpeaking : styles.sensitivityDefault;
    return <View>
      <AccessibilityFocusView accessible role="meter" aria-label={intl.string(t.yZcOjo)} aria-valuenow={state ? 100 : 0} aria-valuemin={0} aria-valuemax={100} aria-valuetext={state ? intl.string(t.haLKZ0) : intl.string(t.X2hJL7)} onAccessibilityFocus={() => {
        ref2.current = true;
      }} onAccessibilityBlur={() => {
        ref2.current = false;
        if (ref3.current != null) {
          clearTimeout(ref3.current);
          ref3.current = null;
        }
      }} style={styles.sensitivity}>
        <View style={styles.sensitivityBar}>
          <View style={[styles.sensitivityCommon, r142]} />
        </View>
      </AccessibilityFocusView>
      <FormHint inset>
        {intl.string(t.W3K5Im)}
      </FormHint>
    </View>;
  }
  return <View style={styles.sensitivity}>
    <View style={styles.sensitivityBar}>
      <View ref={ref5} style={[styles.sensitivityCommon, styles.sensitivityMin, {
        flex
      }]} />
      <View ref={ref6} style={[styles.sensitivityCommon, styles.sensitivityMax, {
        flex: 1 - flex
      }]} />
    </View>
    <View ref={ref4} style={[styles.sensitivityFill, {
      left
    }]} />
    <Module7659 style={styles.sensitivitySlider} value={value} minimumValue={0} maximumValue={100} minimumTrackTintColor="transparent" maximumTrackTintColor="transparent" onValueChange={callback2} onSlidingComplete={function handleSlidingComplete(event) {
      onThresholdChange(-1 * (100 - event));
    }} onResponderGrant={isAndroid() ? () => true : void 0} />
  </View>;
};