// Metro module 8059 (f8060).
import _slicedToArray from "../../../../_bundle/_slicedToArray";
import { useState, useCallback, useEffect, useMemo, useRef } from "react";
import { Image as Image2, View } from "react-native";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import AppStateStore from "../../../../stores/native/AppStateStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
import { sortEffectLayers, usePotentiallyRandomizedProfileEffect } from "../utils";
import { PROFILE_EFFECT_INTRO_DELAY } from "../constants";
import * as _ProfileEffectUtils from "./ProfileEffectUtils";
import useClock from "../useClock";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { AppStates } from "../../../../ConstantsIOS";
import ProfileEffectLayer_android from "./ProfileEffectLayer.android";
import { DEFAULT_PROFILE_EFFECT_WH_RATIO } from "./getAssetWHRatio";
import FastImage from "../../../../components_native/common/FastImage";
import useProfileEffect from "../useProfileEffect";
function $mk79773($env) {
  return () => new Set($env[0].map((item) => item.src));
}
function $mk79774($env) {
  return () => {
    const r2 = $env;
    const r4 = r2[2];
    const current2 = r2[1];
    r4.current = current2;
    r2[3].current = current2.size === 0;
  };
}
function $mk79775($env) {
  return (a0) => {
    const r3 = $env;
    const r2 = r3[3];
    if (!r2.current) {
      const r7 = r3[2];
      r7.current.delete(a0);
      if (r7.current.size === 0) {
        r2.current = true;
      }
    }
  };
}
function $mk79776($env) {
  return (a0) => {
    (0, $env[0])(a0.nativeEvent.layout.width);
  };
}
let useStyles, ProfileEffect;
const StaticEffect = function StaticEffect(props) {
  let props2;
  const { profileEffect: profileEffect2, bannerAdjustment = 0 } = props;
  let env16226;
  const useThumbnail = props.useThumbnail;
  let thumbnailUrlOverride = props.thumbnailUrlOverride;
  const styles2 = useStyles();
  let reducedMotionSrc2 = profileEffect2.reducedMotionSrc;
  const reducedMotionSrc = reducedMotionSrc2;
  const { thumbnailPreviewSrc: thumbnailPreviewSrc2, accessibilityLabel: accessibilityLabel2 } = profileEffect2;
  const r23 = env16226 = {};
  env16226[0] = void 0;
  const r25 = _slicedToArray(useState(0), 2);
  const r15 = r25[0];
  env16226[0] = r25[1];
  useWindowDimensions_native().height;
  const callback2 = useCallback($mk79776(r23), []);
  const state = r15;
  const [height, setState] = useState(0);
  if (thumbnailUrlOverride == null) {
    thumbnailUrlOverride = thumbnailPreviewSrc2;
  }
  const thumbnailPreviewSrc = thumbnailUrlOverride;
  useEffect(() => {
    if (state !== 0) {
      Image2.getSize(useThumbnail ? thumbnailPreviewSrc : reducedMotionSrc, (a0, a1) => {
        setState(a1 * (state / a0));
      }, () => {
        setState(state / DEFAULT_PROFILE_EFFECT_WH_RATIO);
      });
    }
  }, [reducedMotionSrc, thumbnailPreviewSrc, state, useThumbnail]);
  if (height === 0) {
    props2 = {
      style: styles2.profileEffects,
      pointerEvents: "none",
      onLayout: callback2
    };
  } else {
    if (useThumbnail) {
      reducedMotionSrc2 = thumbnailPreviewSrc;
    }
    props2 = {
      style: styles2.profileEffects,
      pointerEvents: "none",
      onLayout: callback2,
      children: <FastImage resizeMode="cover" resizeMethod="resize" enableAnimation source={{
        uri: reducedMotionSrc2
      }} alt={accessibilityLabel2} height={height} width={state} style={[styles2.effect, {
        width: state,
        height,
        top: 0 - bannerAdjustment
      }]} />
    };
  }
  return <View {...props2} />;
};
useStyles = createStyles({
  profileEffects: {
    position: "absolute",
    width: "100%",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    flex: 1,
    justifyContent: "flex-start"
  },
  effect: {
    position: "absolute"
  }
});
ProfileEffect = (props) => {
  let ref, callback, ref2, state3, setState2, ref3, ref4, ref5, stop, reset, stateFromStores, ref6;
  let env16228;
  let env16229;
  const profileEffect = props.profileEffect;
  props.replayOnNavigationFocus;
  const { style, paused } = props;
  ref = void 0;
  callback = void 0;
  ref2 = void 0;
  state3 = void 0;
  setState2 = void 0;
  ref3 = void 0;
  ref4 = void 0;
  ref5 = void 0;
  stop = void 0;
  reset = void 0;
  stateFromStores = void 0;
  ref6 = void 0;
  const styles = useStyles();
  const r21 = env16228 = {};
  env16228[0] = void 0;
  const r9 = _slicedToArray(useState(0), 2);
  const r24 = r9[0];
  env16228[0] = r9[1];
  useWindowDimensions_native().height;
  const callback2 = useCallback($mk79776(r21), []);
  const state2 = r24;
  const accessibilityLabel = profileEffect.accessibilityLabel;
  const memo = useMemo(() => sortEffectLayers(profileEffect.effects), [profileEffect.effects]);
  const r39 = env16229 = {};
  env16229[0] = memo;
  env16229[1] = void 0;
  env16229[2] = void 0;
  env16229[3] = void 0;
  const memo2 = useMemo($mk79773(r39), [memo]);
  env16229[1] = memo2;
  env16229[2] = useRef(memo2);
  const ref7 = useRef(false);
  env16229[3] = ref7;
  useEffect($mk79774(r39), [memo2]);
  const callback3 = useCallback($mk79775(r39), []);
  ref = ref7;
  callback = callback3;
  ref2 = useRef(-PROFILE_EFFECT_INTRO_DELAY);
  [state3, setState2] = useState([]);
  ref3 = useRef([]);
  ref4 = useRef(false);
  ref5 = useRef(memo);
  useEffect(() => {
    ref5.current = memo;
    ref4.current = false;
    ref2.current = -PROFILE_EFFECT_INTRO_DELAY;
    const current2 = memo.map((item) => _ProfileEffectUtils.shouldAnimate(item, ref2.current));
    ref3.current = current2;
    setState2(current2);
  }, [memo]);
  const clock = useClock(useCallback((a0) => {
    if (ref.current) {
      if (!ref4.current) {
        ref4.current = true;
        ref2.current = -PROFILE_EFFECT_INTRO_DELAY;
        ref3.current = [];
      }
      ref2.current = ref2.current + a0;
      const current2 = ref5.current;
      const current = ref3.current;
      let c26100_1 = current2.length !== current.length;
      const current3 = current2.map((item, index) => {
        const shouldAnimate = _ProfileEffectUtils.shouldAnimate(item, ref2.current);
        if (shouldAnimate !== current[index]) {
          c26100_1 = true;
        }
        return shouldAnimate;
      });
      if (c26100_1) {
        ref3.current = current3;
        setState2(current3);
      }
    }
  }, [ref]));
  stop = clock.stop;
  reset = clock.reset;
  stateFromStores = useStateFromStores([AppStateStore], () => AppStateStore.getState());
  ref6 = useRef(null);
  useEffect(() => {
    if (ref6.current !== null) {
      if (ref6.current !== stateFromStores) {
        if (stateFromStores === AppStates.ACTIVE) {
          reset();
        } else {
          stop();
        }
        ref6.current = stateFromStores;
      }
    } else {
      ref6.current = stateFromStores;
    }
  }, [stateFromStores, stop, reset]);
  useEffect(() => {
    if (paused) {
      stop();
    } else {
      reset();
    }
  }, [paused, stop, reset]);
  return <View style={useMemo(() => [styles.profileEffects, style], [styles, style])} pointerEvents="none" onLayout={callback2}>
    {memo.map((item, index) => {
      const key = item.src + index;
      let animate = state3[index];
      if (animate == null) {
        animate = false;
      }
      return <ProfileEffectLayer_android key={key} layerConfig={item} animate={animate} paused={paused} width={state2} accessibilityLabel={accessibilityLabel} onLoad={callback} loaded={ref.current} />;
    })}
  </View>;
};
export default function WrappedProfileEffect(props) {
  const profileEffect2 = useProfileEffect(props.skuId);
  const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const potentiallyRandomizedProfileEffect = usePotentiallyRandomizedProfileEffect(profileEffect2);
  return potentiallyRandomizedProfileEffect != null ? !stateFromStores2 && !props.useThumbnail ? <ProfileEffect profileEffect={potentiallyRandomizedProfileEffect} {...props} /> : <StaticEffect profileEffect={potentiallyRandomizedProfileEffect} bannerAdjustment={props.bannerAdjustment} useThumbnail={props.useThumbnail} thumbnailUrlOverride={props.thumbnailUrlOverride} /> : null;
};
export function usePreloadProfileEffect(a0) {
  let env16224;
  const r1 = env16224 = {};
  env16224[0] = a0;
  const memo2 = useMemo($mk79773(r1), [a0]);
  env16224[1] = memo2;
  env16224[2] = useRef(memo2);
  const ref7 = useRef(false);
  env16224[3] = ref7;
  useEffect($mk79774(r1), [memo2]);
  return {
    loaded: ref7,
    onLayerLoaded: useCallback($mk79775(r1), [])
  };
}