// Metro module 14094 (f14095).
import * as Module19 from "react";
import { useCallback, useState, useRef, useEffect, useMemo } from "react";
import { AppState, StyleSheet, View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import BountyStore from "../BountyStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import * as _Module501 from "../../../_bundle/Module501";
import { useStateFromStores } from "../../../_bundle/Module589";
import { getScaledImageUrl, getScaledFirstFrameImageUrl } from "../lib/AssetUtils";
import { useToken } from "../../../design/tokens/native/useToken";
import { Card } from "../../../design/components/Card/native/Card.native";
import Video from "../../../_bundle/Video_8143";
import FastImage from "../../../components_native/common/FastImage";
import { CheckmarkSmallBoldIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallBoldIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import { CircleCheckIcon } from "../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
let c9860_14, isAndroid, isAndroid2;
const width = 188;
const useStyles = createStyles(() => ({
  tile: {
    gap: Module712.space.PX_12
  },
  card: {
    width,
    height: 313,
    overflow: "hidden",
    padding: 0
  },
  cardImage: {
    ...StyleSheet.absoluteFillObject
  },
  previewVideo: {
    ...StyleSheet.absoluteFillObject
  },
  badge: {
    position: "absolute",
    top: Module712.space.PX_12,
    left: Module712.space.PX_12,
    backgroundColor: Module712.colors.CONTROL_OVERLAY_PRIMARY_BACKGROUND_DEFAULT,
    borderRadius: Module712.radii.round,
    paddingHorizontal: Module712.space.PX_8,
    paddingVertical: Module712.space.PX_4,
    color: Module712.colors.CONTROL_OVERLAY_PRIMARY_TEXT_DEFAULT
  },
  badgeContent: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_4
  },
  badgeText: {
    textTransform: "uppercase",
    color: Module712.colors.CONTROL_OVERLAY_PRIMARY_TEXT_DEFAULT
  },
  startButton: {
    position: "absolute",
    bottom: Module712.space.PX_8,
    left: Module712.space.PX_8,
    right: Module712.space.PX_8
  },
  cardFooter: {
    flexDirection: "column",
    alignItems: "flex-start",
    maxWidth: width
  },
  advertiserRow: {
    flexDirection: "row",
    gap: Module712.space.PX_4,
    alignItems: "center"
  },
  advertiserName: {
    flexShrink: 1
  },
  advertiserIcon: {
    flexShrink: 0,
    opacity: 0.7
  }
}));
c9860_14 = _Module501.isAndroid() ? 150 : 0;
isAndroid = _Module501.isAndroid();
isAndroid2 = _Module501.isAndroid();
const r52 = Module19.memo(function({ bounty, index, isActive, isModalVisible, onPress }) {
  let setState, setState2, state, setState3, ref, ref2, setState4, state2;
  setState = void 0;
  setState2 = void 0;
  state = void 0;
  setState3 = void 0;
  ref = void 0;
  ref2 = void 0;
  setState4 = void 0;
  state2 = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([BountyStore], () => BountyStore.isBountyCompleted(bounty.id));
  const callback2 = useCallback(() => {
    onPress(bounty, index);
  }, [onPress, bounty, index]);
  const videoPreview = bounty.videoPreview;
  let uri = bounty.imagePreview != null ? getScaledImageUrl({
    assetUrl: bounty.imagePreview,
    width,
    height: 313
  }) : null;
  if (uri == null && videoPreview != null) {
    uri = getScaledFirstFrameImageUrl({
      assetUrl: videoPreview,
      width,
      height: 313
    });
  }
  let state3;
  [state3, setState] = useState(false);
  const callback = useCallback(() => {
    setState(true);
  }, []);
  let state4;
  [state4, setState2] = useState(false);
  let state5;
  [state5, setState3] = useState(false);
  state = state5;
  const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const token = useToken(Module712.modules.mobile.BOUNTY_TILE_BORDER_RADIUS);
  ref = useRef(null);
  const callback3 = useCallback(() => {
    if (ref.current != null) {
      clearTimeout(ref.current);
    }
    ref.current = setTimeout(() => {
      setState2(true);
    }, c9860_14);
  }, []);
  const [state6, setState5] = useState(isActive);
  if (isActive !== state6) {
    setState5(isActive);
    if (isActive) {
      if (state4 ? !state : state4) {
        setState2(false);
      }
      if (state) {
        setState3(false);
      }
    } else if (isAndroid) {
      setState3(true);
    }
  }
  ref2 = useRef(null);
  useEffect(() => {
    if (state) {
      ref2.current = setTimeout(() => {
        setState3(false);
        setState2(false);
        ref2.current = null;
      }, 150);
    }
    return () => {
      if (ref2.current != null) {
        clearTimeout(ref2.current);
        ref2.current = null;
      }
    };
  }, [state]);
  useEffect(() => {
    let r2 = isActive;
    if (isActive ? ref2.current != null : isActive) {
      clearTimeout(ref2.current);
      ref2.current = null;
    }
    if (!isActive) {
      r2 = ref.current == null;
    }
    if (!r2) {
      clearTimeout(ref.current);
      ref.current = null;
    }
  }, [isActive]);
  useEffect(() => () => {
    if (ref.current != null) {
      clearTimeout(ref.current);
      ref.current = null;
    }
  }, []);
  let state7;
  [state7, setState4] = useState(AppState.currentState === "active");
  useEffect(() => {
    let c27629_0 = AppState.addEventListener("change", (a0) => {
      setState4(a0 === "active");
    });
    return () => {
      c27629_0.remove();
    };
  }, []);
  let r126 = (isActive ? isActive : state) && videoPreview != null && state3;
  let r127 = isAndroid2;
  if (isAndroid2) {
    r127 = isModalVisible;
  }
  let r128 = !r127;
  if (!r127) {
    if (state) {
      state5 = !isActive;
    }
    r128 = !state5;
  }
  if (r128) {
    r128 = r126;
  }
  if (r128) {
    r128 = state4;
  }
  state2 = r128;
  const memo = useMemo(() => ({
    opacity: state2 ? 0 : 1
  }), [state2]);
  if (r126) {
    r126 = <Video accessible={false} importantForAccessibility="no-hide-descendants" accessibilityRole="none" onReadyForDisplay={callback3} source={{
      uri: videoPreview
    }} style={styles.previewVideo} resizeMode="cover" repeat muted disableFocus paused={state7 ? stateFromStores2 : !state7} />;
  }
  const r150 = [r126, , , ,];
  if (uri == null) {
    uri = void 0;
  }
  r150[1] = <FastImage style={[styles.cardImage, memo]} onLoad={callback} source={{
    uri
  }} resizeMode="cover" />;
  r150[2] = <View style={styles.badge}>
    <View style={styles.badgeContent}>
      {stateFromStores && <CheckmarkSmallBoldIcon size="xxs" color={Module712.colors.CONTROL_OVERLAY_PRIMARY_TEXT_DEFAULT} />}
      <Text variant="text-xs/bold" style={styles.badgeText}>
        {intl.string(stateFromStores ? t.vlGTLf : t["fFIJ/9"])}
      </Text>
    </View>
  </View>;
  r150[3] = <View style={styles.startButton}>
    <Button variant="secondary-overlay" text={stateFromStores ? intl.string(t["9UtZAY"]) : intl.string(t.LhlgY9)} onPress={callback2} />
  </View>;
  const r209 = [<Card style={styles.card} radius={token} onPress={callback2} android_ripple={{
    color: "transparent"
  }}>{r150}</Card>, ,];
  let advertiserName = bounty.advertiserName;
  if (advertiserName == null) {
    advertiserName = "";
  }
  r209[1] = <View style={styles.cardFooter}>
    <View style={styles.advertiserRow}>
      <Text variant="text-sm/medium" color="text-subtle" lineClamp={1} style={styles.advertiserName}>{advertiserName}</Text>
      <CircleCheckIcon size="xxs" style={styles.advertiserIcon} color={Module712.colors.ICON_SUBTLE} />
    </View>
    <Text variant="text-sm/medium" color="text-muted">
      {intl.string(t.o6FLcF)}
    </Text>
  </View>;
  return <View style={styles.tile}>{r209}</View>;
});
export default r52;
export const CARD_WIDTH = 188;