// Metro module 12317 (f12318).
import { memo, useState, useRef, useCallback, useEffect } from "react";
import { ActivityIndicator, View, StyleSheet } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import MediaModalSpoilerOverlay from "./MediaModalSpoilerOverlay";
const useStyles = createStyles({
  loader: {
    ...StyleSheet.absoluteFillObject,
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "rgba(0, 0, 0, 0.7)"
  },
  loaderIndicator: {
    marginTop: Module712.space.PX_12
  },
  loaderText: {
    textAlign: "center"
  }
});
let c8512_10 = {
  None: 0,
  0: "None",
  Loading: 1,
  1: "Loading",
  Loaded: 2,
  2: "Loaded",
  Error: 3,
  3: "Error"
};
const r55 = memo(function MediaModalLoader(props) {
  let r106;
  const { Component, style, onLoadStart, onLoad, onError, index = 0, source, ...rest } = props;
  const styles = useStyles();
  const [state, setState] = useState(c8512_10.None);
  const [state2, setState2] = useState(0);
  const ref = useRef(null);
  const callback2 = useCallback(() => {
    const current = setTimeout(() => {
      setState((prevState) => prevState === c8512_10.None ? c8512_10.Loading : c8512_10.None);
    }, 1000);
    ref.current = current;
    return current;
  }, []);
  const callback = useCallback(({ nativeEvent }) => {
    setState2(100 * nativeEvent.loaded / nativeEvent.total);
  }, []);
  const callback3 = useCallback(() => setState(c8512_10.Loaded), []);
  const callback4 = useCallback(() => setState(c8512_10.Error), []);
  useEffect(() => {
    if (c8512_10.Loading === state) {
      if (onLoadStart != null) {
        onLoadStart();
      }
    } else if (c8512_10.Error === state) {
      if (onError != null) {
        onError();
      }
    } else if (c8512_10.Loaded === state && onLoad != null) {
      onLoad();
    }
  }, [state, onLoadStart, onError, onLoad]);
  useEffect(() => () => clearTimeout(ref.current));
  if (state === c8512_10.Error) {
    r106 = <View style={[styles.loader, style]}>
      <Text style={styles.loaderText} variant="heading-md/semibold" color="text-overlay-light">
        {intl.string(t["+ITMYX"])}
      </Text>
    </View>;
  } else {
    let description = source.description;
    if (description == null) {
      description = void 0;
    }
    r106 = <>
      {[<Component {...rest} style={style} source={source} onLoadStart={callback2} onProgress={callback} onLoad={callback3} onError={callback4} accessibilityRole="image" accessibilityLabel={description} loop />, state === c8512_10.Loading ? <View style={[styles.loader, style]}>
        {source.videoURI == null ? <Text style={styles.loaderText} variant="heading-md/semibold" color="text-overlay-light">
          {Math.round(state2)}
          %
        </Text> : null}
        <ActivityIndicator color="white" style={styles.loaderIndicator} size="large" />
      </View> : null, <MediaModalSpoilerOverlay style={style} index={index} source={source} />]}
    </>;
  }
  return r106;
});
export default r55;