// Metro module 11740 (f11741).
import * as Module19 from "react";
import { useEffect, useState, useCallback, useMemo } from "react";
import { View, ActivityIndicator } from "react-native";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import { useVoiceMessagesUIStore } from "../VoiceMessagesUIStore";
import { VOICE_RECORDING_MAX_DURATION_MILLIS, VOICE_RECORDING_MAX_DURATION_OFFSET, VOICE_RECORDING_REALLY_WARN_DURATION_MILLIS, VOICE_RECORDING_WARN_DURATION_MILLIS, WAVEFORM_WAVE_MAX_VALUE } from "../../VoiceMessageConstants";
import { ThemeTypes } from "../../../../Constants";
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle, useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import * as _PlatformUtils from "../../../../utils/PlatformUtils";
import { withSpring } from "../../../../design/animation/reanimated/spring/spring";
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
import { useMobileVisualRefreshConfig } from "../../../themes/experiments/MobileVisualRefreshExperiment";
import { useToken } from "../../../../design/tokens/native/useToken";
import { getTimeFormat } from "../../../../utils/native/TimeUtils";
import { Text } from "../../../../design/components/Text/native/Text";
import { ThemeContextProvider } from "../../../../_bundle/Module3901";
function $mk116289() {
  return (a0) => !a0;
}
let AnimatedComponent, useStyles, __initData, Waveform, c8040_21, __initData2, Duration, __initData3, __initData4, __initData5, __initData6;
const WaveformBar = function WaveformBar(props) {
  const value = props.value;
  const styles = useStyles();
  const sharedValue = useSharedValue(0);
  const sharedValue2 = useSharedValue(0);
  const sharedValue3 = useSharedValue(0);
  const r26 = function() {
    return {
      height: sharedValue.get(),
      width: sharedValue2.get(),
      marginRight: sharedValue3.get()
    };
  };
  r26.__closure = {
    animatedHeight: sharedValue,
    animatedWidth: sharedValue2,
    animatedMargin: sharedValue3
  };
  r26.__workletHash = 8768145898720;
  r26.__initData = __initData;
  const animatedStyle = useAnimatedStyle(r26);
  useEffect(() => {
    sharedValue.set(withSpring(Math.max(2, 20 * Math.min(1, value / WAVEFORM_WAVE_MAX_VALUE * 1.25))));
  }, [sharedValue, value]);
  useEffect(() => {
    sharedValue2.set(_timing.withTiming(2, {
      duration: 300,
      easing: _ReanimatedRexport.Easing.linear
    }));
    sharedValue3.set(_timing.withTiming(4, {
      duration: 300,
      easing: _ReanimatedRexport.Easing.linear
    }));
  }, [sharedValue2, sharedValue3]);
  return <ReanimatedRexport.View style={[styles.waveformBar, animatedStyle]} />;
};
Waveform = function Waveform() {
  const styles = useStyles();
  useVoiceMessagesUIStore((a0) => a0.waveformVersion);
  const voiceMessagesUIStore3 = useVoiceMessagesUIStore((a0) => a0.waveform);
  const [state, setState] = useState(0);
  const r21 = voiceMessagesUIStore3.slice(-state);
  return <View style={styles.waveformContainer} onLayout={useCallback((a0) => {
    setState(Math.round(a0.nativeEvent.layout.width / 6) + 2);
  }, [])}>
    {r21.map((item) => {
      const [value2, key] = item;
      return <WaveformBar key={key} value={value2} />;
    })}
  </View>;
};
Duration = function Duration(props) {
  let state, setState2, state2, setState3, voiceMessagesUIStore2, setState4;
  const animationValue = props.animationValue;
  state = void 0;
  setState2 = void 0;
  state2 = void 0;
  setState3 = void 0;
  voiceMessagesUIStore2 = void 0;
  setState4 = void 0;
  const styles = useStyles();
  const chatInputFloating = useMobileVisualRefreshConfig({
    location: "voice-message-chat"
  }).chatInputFloating;
  const voiceMessagesUIStore = useVoiceMessagesUIStore((a0) => a0.startTimeMillis);
  [state, setState2] = useState(() => voiceMessagesUIStore != null ? Date.now() - voiceMessagesUIStore : 0);
  [state2, setState3] = useState(void 0);
  voiceMessagesUIStore2 = useVoiceMessagesUIStore((a0) => a0.savedVoiceMessageUploadData != null);
  const token = useToken(Module712.modules.mobile.VOICE_MESSAGE_DURATION_TEXT_STYLE);
  useEffect(() => {
    if (voiceMessagesUIStore2) {
      setState2(VOICE_RECORDING_MAX_DURATION_MILLIS + VOICE_RECORDING_MAX_DURATION_OFFSET);
      setState3(c8040_21.ENDED);
      return void 0;
    }
    let c27140_0 = setInterval(() => {
      if (voiceMessagesUIStore != null) {
        const r7 = Date.now() - voiceMessagesUIStore;
        setState2(r7);
        if (r7 > VOICE_RECORDING_REALLY_WARN_DURATION_MILLIS) {
          setState3(c8040_21.REALLY_WARN);
        } else if (r7 > VOICE_RECORDING_WARN_DURATION_MILLIS) {
          setState3(c8040_21.WARN);
        }
      }
    }, 100);
    return () => {
      clearInterval(c27140_0);
    };
  }, [voiceMessagesUIStore, voiceMessagesUIStore2]);
  const memo = useMemo(() => getTimeFormat(state / 1000, {
    padMinutes: false
  }), [state]);
  let state3;
  [state3, setState4] = useState(false);
  useEffect(() => {
    if (state2 != null) {
      if (state2 !== c8040_21.ENDED) {
        const r1 = AccessibilityStore.useReducedMotion ? 1000 : state2 === c8040_21.WARN ? 500 : 250;
        let c27141_0;
        let c27141_1 = r1;
        const flash2 = function flash() {
          setState4($mk116289());
          c27141_0 = setTimeout(flash2, c27141_1);
        };
        setState4($mk116289());
        c27141_0 = setTimeout(flash2, r1);
        return () => {
          clearTimeout(c27141_0);
        };
      }
      setState4(true);
    } else {
      setState4(false);
    }
  }, [state2]);
  const B = function B() {
    return {
      opacity: animationValue.get()
    };
  };
  B.__closure = {
    animationValue
  };
  B.__workletHash = 4012974382717;
  B.__initData = __initData2;
  const animatedStyle = useAnimatedStyle(B);
  const style = [styles.dot, ,];
  const r83 = voiceMessagesUIStore != null && !voiceMessagesUIStore2;
  style[1] = r83 ? !r83 : styles.dotDismissed;
  const r96 = <ReanimatedRexport.View style={[styles.durationContainer, animatedStyle]}>
    <View style={style} />
    <Text style={styles.duration} variant={token} color={state3 ? "text-feedback-critical" : chatInputFloating ? "text-default" : "text-overlay-light"} tabularNumbers>{memo}</Text>
  </ReanimatedRexport.View>;
  return chatInputFloating ? r96 : <ThemeContextProvider theme={ThemeTypes.DARK}>{r96}</ThemeContextProvider>;
};
AnimatedComponent = ReanimatedRexport.createAnimatedComponent(ActivityIndicator);
const isAndroid = _PlatformUtils.isAndroid();
const mobile = Module712.modules.mobile;
useStyles = createStyles({
  container: {
    height: "100%",
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: Module712.modules.mobile.VOICE_MESSAGE_RECORDING_CONTAINER_PADDING_VERTICAL,
    paddingHorizontal: Module712.modules.mobile.VOICE_MESSAGE_RECORDING_PILL_PADDING_HORIZONTAL,
    gap: Module712.modules.mobile.CHAT_INPUT_FLOATING_CONTENT_GAP,
    borderRadius: Module712.modules.mobile.VOICE_MESSAGE_RECORDING_PILL_BORDER_RADIUS,
    backgroundColor: Module712.colors.MOBILE_CHATINPUT_BACKGROUND_DEFAULT,
    borderWidth: Module712.modules.mobile.CHAT_INPUT_FLOATING_ACCESSORY_BORDER_WIDTH,
    borderColor: Module712.colors.MOBILE_CHATINPUT_BORDER_DEFAULT
  },
  loading: {
    position: "absolute",
    left: 12
  },
  dot: {
    height: 6,
    width: 6,
    backgroundColor: Module712.unsafe_rawColors.RED_400,
    marginHorizontal: 4,
    borderRadius: 6
  },
  dotDismissed: {
    backgroundColor: "transparent"
  },
  waveformContainer: {
    flex: 1,
    height: "100%",
    overflow: "hidden",
    justifyContent: "flex-end",
    flexDirection: "row",
    alignItems: "center",
    marginLeft: Module712.modules.mobile.VOICE_MESSAGE_RECORDING_WAVEFORM_MARGIN_LEFT
  },
  waveformBar: {
    backgroundColor: Module712.colors.MOBILE_VOICE_MESSAGE_RECORDING_WAVEFORM_BAR_BACKGROUND,
    borderRadius: 1
  },
  durationContainer: {
    flexDirection: "row",
    alignItems: "center"
  },
  duration: {
    lineHeight: isAndroid ? mobile.VOICE_MESSAGE_DURATION_LINE_HEIGHT_ANDROID : mobile.VOICE_MESSAGE_DURATION_LINE_HEIGHT_IOS,
    textAlignVertical: _PlatformUtils.isAndroid() ? "center" : void 0
  }
});
__initData = {
  code: "function VoiceMessageChatTsx1(){const{animatedHeight,animatedWidth,animatedMargin}=this.__closure;return{height:animatedHeight.get(),width:animatedWidth.get(),marginRight:animatedMargin.get()};}"
};
c8040_21 = {
  WARN: 0,
  0: "WARN",
  REALLY_WARN: 1,
  1: "REALLY_WARN",
  ENDED: 2,
  2: "ENDED"
};
__initData2 = {
  code: "function VoiceMessageChatTsx2(){const{animationValue}=this.__closure;return{opacity:animationValue.get()};}"
};
__initData3 = {
  code: "function VoiceMessageChatTsx3(){const{initialAnimation,isRecording}=this.__closure;return initialAnimation.get()===1&&isRecording;}"
};
__initData4 = {
  code: "function VoiceMessageChatTsx4(result,previous){const{animationValue,withTiming,Easing,loadingOpacity}=this.__closure;if(result&&result!==previous){animationValue.set(withTiming(1,{easing:Easing.quad,duration:200}));loadingOpacity.set(0);}}"
};
__initData5 = {
  code: "function VoiceMessageChatTsx5(){const{initialAnimation,backgroundColor}=this.__closure;return{width:80+20*initialAnimation.get()+\"%\",...(backgroundColor!=null?{backgroundColor:backgroundColor.get()}:{})};}"
};
__initData6 = {
  code: "function VoiceMessageChatTsx6(){const{loadingOpacity}=this.__closure;return{opacity:loadingOpacity.get()};}"
};
const r135 = Module19.memo(function({ isRecording, initialAnimation, backgroundColor, leftAccessory, rightAccessory }) {
  let sharedValue5;
  sharedValue5 = void 0;
  const styles = useStyles();
  const token = useToken(Module712.colors.MOBILE_VOICE_MESSAGE_RECORDING_SPINNER_COLOR);
  const sharedValue4 = useSharedValue(0);
  useEffect(() => {
    if (isRecording) {
      return void 0;
    }
    let c27142_0 = setTimeout(() => {
      sharedValue4.set(_timing.withTiming(1, {
        easing: _ReanimatedRexport.Easing.quad,
        duration: 200
      }));
    }, 1000);
    return () => {
      clearTimeout(c27142_0);
    };
  }, [sharedValue4, isRecording]);
  sharedValue5 = useSharedValue(0);
  const A = function A() {
    return initialAnimation.get() === 1 && isRecording;
  };
  A.__closure = {
    initialAnimation,
    isRecording
  };
  A.__workletHash = 7599681139161;
  A.__initData = __initData3;
  const h = function h(a0, a1) {
    if (a0 ? a0 !== a1 : a0) {
      sharedValue5.set(_timing.withTiming(1, {
        easing: _ReanimatedRexport.Easing.quad,
        duration: 200
      }));
      sharedValue4.set(0);
    }
  };
  h.__closure = {
    animationValue: sharedValue5,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing,
    loadingOpacity: sharedValue4
  };
  h.__workletHash = 7661977794788;
  h.__initData = __initData4;
  useAnimatedReaction(A, h);
  const I = function I() {
    return {
      width: 80 + 20 * initialAnimation.get() + "%",
      ...backgroundColor != null ? {
        backgroundColor: backgroundColor.get()
      } : {}
    };
  };
  I.__closure = {
    initialAnimation,
    backgroundColor
  };
  I.__workletHash = 3621425956686;
  I.__initData = __initData5;
  const animatedStyle = useAnimatedStyle(I);
  const f = function f() {
    return {
      opacity: sharedValue4.get()
    };
  };
  f.__closure = {
    loadingOpacity: sharedValue4
  };
  f.__workletHash = 17421928475897;
  f.__initData = __initData6;
  const animatedStyle2 = useAnimatedStyle(f);
  return <ReanimatedRexport.View style={[styles.container, animatedStyle]}>
    {isRecording ? null : <AnimatedComponent style={[styles.loading, animatedStyle2]} color={token} size="small" />}
    {leftAccessory}
    <Duration animationValue={sharedValue5} />
    <Waveform />
    {rightAccessory}
  </ReanimatedRexport.View>;
});
export default r135;