// Metro module 15266 (f15267).
import { useMemo, useState, useEffect, useRef } from "react";
import { ActivityIndicator, View } from "react-native";
import ConnectivityIndicatorStateStore, { ConnectivityIndicatorState } from "../../connectivity/native/ConnectivityIndicatorStateStore";
import { CONNECTION_BANNER_HEIGHT, YOU_BAR_SPRING_CONFIG } from "./you_bar/YouBarConstants";
import { AnalyticEvents } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { intl, t } from "../../../intl/index.native";
import { useToken } from "../../../design/tokens/native/useToken";
import { ConnectionUnknownIcon } from "../../../design/components/Icon/native/redesign/generated/ConnectionUnknownIcon";
import { ConnectionFineIcon } from "../../../design/components/Icon/native/redesign/generated/ConnectionFineIcon";
import { Text } from "../../../design/components/Text/native/Text";
import Module689 from "../../../_bundle/Module689";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import Module5165 from "../../../_bundle/Module5165";
import Module4611 from "../../../_bundle/Module4611";
import { useStateFromStores } from "../../../_bundle/Module589";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { useYouBarBottomMargin } from "./you_bar/hooks/useYouBarMargins";
import { withSpring } from "../../../design/animation/reanimated/spring/spring";
import ConnectionIndicatorExperiment from "./ConnectionIndicatorExperiment";
let _excluded, locations, start, end, locations2, start2, end2, useStyles, ConnectionBannerContent, BackOnlineGlow, __initData, __initData2, ConnectionBannerInner;
const ConnectionBannerIcon = function ConnectionBannerIcon(props) {
  const state = props.state;
  const styles = useStyles();
  const token2 = useToken(Module712.colors.INTERACTIVE_ICON_DEFAULT);
  if (ConnectivityIndicatorState.WAITING_FOR_NETWORK === state) {
    return <View style={styles.leadingSlot}>
      <ActivityIndicator size="small" color={token2} style={styles.spinner} />
    </View>;
  }
  if (ConnectivityIndicatorState.NO_CONNECTION === state) {
    return <View style={styles.leadingSlot}>
      <ConnectionUnknownIcon size="xs" color={Module712.colors.INTERACTIVE_ICON_DEFAULT} />
    </View>;
  }
  if (ConnectivityIndicatorState.BACK_ONLINE === state) {
    return <View style={styles.leadingSlot}>
      <ConnectionFineIcon size="xs" color={Module712.colors.ICON_FEEDBACK_POSITIVE} />
    </View>;
  }
};
ConnectionBannerContent = function ConnectionBannerContent(props) {
  const state = props.state;
  return <View style={useStyles().content}>
    <ConnectionBannerIcon state={state} />
    <Text variant="text-sm/medium" color={state === ConnectivityIndicatorState.BACK_ONLINE ? "text-feedback-positive" : "text-muted"} maxFontSizeMultiplier={1.5}>
      {ConnectivityIndicatorState.WAITING_FOR_NETWORK === state ? intl.string(t.XKk1gp) : ConnectivityIndicatorState.NO_CONNECTION === state ? intl.string(t.zPerw8) : ConnectivityIndicatorState.BACK_ONLINE === state ? intl.string(t.j8lYE2) : void 0}
    </Text>
  </View>;
};
BackOnlineGlow = function BackOnlineGlow(props) {
  const progress = props.progress;
  const styles = useStyles();
  const token = useToken(Module712.colors.ICON_FEEDBACK_POSITIVE);
  return <ReanimatedRexport.View style={[styles.glow, {
    opacity: progress
  }]} pointerEvents="none">
    <Module5165 style={styles.glow} maskElement={<Module4611 style={styles.glowMaskGradient} colors={_excluded} locations={locations} start={start} end={end} />}>
      <Module4611 style={styles.glowMaskGradient} colors={useMemo(() => {
        const r4 = Module689(token);
        return [r4.alpha(0).css(), r4.alpha(0.1).css(), r4.alpha(0.28).css(), r4.alpha(0.55).css()];
      }, [token])} locations={locations2} start={start2} end={end2} />
    </Module5165>
  </ReanimatedRexport.View>;
};
ConnectionBannerInner = function ConnectionBannerInner() {
  let shouldShowBanner, c21829_1, sharedValue, sharedValue2;
  const styles = useStyles();
  const youBarBottomMargin = useYouBarBottomMargin();
  const stateFromStores2 = useStateFromStores([ConnectivityIndicatorStateStore], () => ConnectivityIndicatorStateStore.getState());
  shouldShowBanner = stateFromStores2 !== ConnectivityIndicatorState.HIDDEN;
  const r4 = stateFromStores2 === ConnectivityIndicatorState.BACK_ONLINE;
  c21829_1 = r4;
  const r33 = stateFromStores2 !== ConnectivityIndicatorState.HIDDEN ? stateFromStores2 : null;
  sharedValue = useSharedValue(0);
  const [state, setState] = useState(r33);
  sharedValue2 = useSharedValue(0);
  if (r33 != null && state !== r33) {
    setState(r33);
  }
  useEffect(() => {
    const r0 = shouldShowBanner ? 1 : 0;
    const n = function n(a0) {
      if (!(a0 !== true || shouldShowBanner)) {
        _ReanimatedRexport.runOnJS(setState)(null);
      }
    };
    n.__closure = {
      shouldShowBanner,
      runOnJS: _ReanimatedRexport.runOnJS,
      setRenderState: setState
    };
    n.__workletHash = 3065113239920;
    n.__initData = __initData;
    sharedValue2.set(withSpring(r0, YOU_BAR_SPRING_CONFIG, "respect-motion-settings", n));
  }, [shouldShowBanner, sharedValue2]);
  useEffect(() => {
    sharedValue.set(withSpring(c21829_1 ? 1 : 0, YOU_BAR_SPRING_CONFIG));
  }, [r4, sharedValue]);
  const A = () => ({
    transform: [{
      translateY: (1 - sharedValue2.get()) * CONNECTION_BANNER_HEIGHT
    }],
    opacity: sharedValue2.get()
  });
  A.__closure = {
    progress: sharedValue2,
    CONNECTION_BANNER_HEIGHT
  };
  A.__workletHash = 13973493587548;
  A.__initData = __initData2;
  return <ReanimatedRexport.View pointerEvents="none" style={[styles.container, {
    height: youBarBottomMargin + CONNECTION_BANNER_HEIGHT
  }, useAnimatedStyle(A)]}>
    {state === ConnectivityIndicatorState.BACK_ONLINE ? <BackOnlineGlow progress={sharedValue} /> : null}
    {state != null ? <ConnectionBannerContent state={state} /> : null}
  </ReanimatedRexport.View>;
};
_excluded = ["transparent", "black", "black", "transparent"];
locations = [0, 0.25, 0.75, 1];
start = {
  x: 0,
  y: 0.5
};
end = {
  x: 1,
  y: 0.5
};
locations2 = [0, 0.4, 0.75, 1];
start2 = {
  x: 0,
  y: 0
};
end2 = {
  x: 0,
  y: 1
};
useStyles = createStyles({
  container: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0
  },
  glow: {
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  },
  glowMaskGradient: {
    flex: 1
  },
  content: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    height: CONNECTION_BANNER_HEIGHT,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: Module712.space.PX_8,
    paddingHorizontal: Module712.space.PX_12
  },
  leadingSlot: {
    width: 16,
    height: 16,
    alignItems: "center",
    justifyContent: "center"
  },
  spinner: {
    transform: [{
      scale: 0.8
    }]
  }
});
__initData = {
  code: "function ConnectionBannerTsx1(finished){const{shouldShowBanner,runOnJS,setRenderState}=this.__closure;if(finished===true&&!shouldShowBanner){runOnJS(setRenderState)(null);}}"
};
__initData2 = {
  code: "function ConnectionBannerTsx2(){const{progress,CONNECTION_BANNER_HEIGHT}=this.__closure;return{transform:[{translateY:(1-progress.get())*CONNECTION_BANNER_HEIGHT}],opacity:progress.get()};}"
};
export default function ConnectionBanner() {
  let ref;
  const config = ConnectionIndicatorExperiment.useConfig({
    location: "ConnectionBanner"
  });
  const { timeoutMs, hidden } = config;
  ref = void 0;
  const stateFromStores = useStateFromStores([ConnectivityIndicatorStateStore], () => ConnectivityIndicatorStateStore.getState());
  ref = useRef(null);
  useEffect(() => {
    L10: {
      const current = ref.current;
      ref.current = stateFromStores;
      if (current != null) {
        if (current !== ConnectivityIndicatorState.HIDDEN && current !== ConnectivityIndicatorState.BACK_ONLINE) {
          break L10;
        }
        if (stateFromStores !== ConnectivityIndicatorState.HIDDEN && stateFromStores !== ConnectivityIndicatorState.BACK_ONLINE) {
          AnalyticsUtils.track(AnalyticEvents.CONNECTION_INDICATOR_SHOWN, {
            connection_indicator_type: hidden ? "hidden" : stateFromStores === ConnectivityIndicatorState.NO_CONNECTION ? "offline" : "connecting"
          });
        }
      }
    }
  }, [stateFromStores, hidden]);
  return timeoutMs == null ? null : hidden ? null : <ConnectionBannerInner />;
};