// Metro module 15236 (f15237).
import { useCallback, useRef, useMemo } from "react";
import { View } from "react-native";
import MobileGameCommunitiesStore from "./MobileGameCommunitiesStore";
import { AnalyticEvents } from "../../../Constants";
import { MIN_HEADER_HEIGHT } from "../../main_tabs_v2/native/shared_components/MainTabsV2Constants";
import { jsx } from "react/jsx-runtime";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useFocusEffect } from "../../../_bundle/Module1481";
import { useStateFromStoresObject, useStateFromStoresArray } from "../../../_bundle/Module589";
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
import GameCommunityMultiGuildUpsellCard from "./GameCommunityMultiGuildUpsellCard";
import { FlashList } from "../../../_bundle/noop_6676";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import { useGradientTop } from "../../client_themes/native/ClientThemesOverrides";
import { GameCommunityUpsellMultiExperiment } from "./GameCommunityUpsellExperiment";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { dismissGuild } from "./MobileGameCommunitiesActionCreators";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { HeaderIconButton } from "../../main_tabs_v2/native/shared_components/HeaderShared";
import Module9126 from "../../../_bundle/Module9126";
function $mk95782($env) {
  return () => {
    $env[3].current.clear();
  };
}
function $mk95783($env) {
  return (a0) => {
    a0.viewableItems.forEach($mk110713($env));
  };
}
function $mk110713($env) {
  return ({ item }) => {
    if (item != null) {
      let r0 = "left" in item && item.left != null;
      const r5 = $env;
      if (r0) {
        r0 = !r5[3].current.has(item.left.id);
      }
      if (r0) {
        const r21 = $env.$parent;
        const r22 = r5[3];
        const left = item.left;
        const game_id = r5[0][item.left.id];
        const variant = r5[1];
        const location_stack = r5[2];
        r22.current.add(left.id);
        const r13 = r21[0];
        const r29 = r21[3];
        r13(r29[8]).trackImpression({
          type: r13(r29[9]).ImpressionTypes.PANE,
          name: r13(r29[9]).ImpressionNames.GAME_COMMUNITY_MULTI_GUILD_UPSELL_CARD,
          properties: {
            game_id,
            guild_id: left.id,
            location_stack,
            variant
          }
        });
      }
      if ("right" in item && item.right != null && !r5[3].current.has(item.right.id)) {
        const r54 = $env.$parent;
        const r55 = r5[3];
        const right = item.right;
        const game_id2 = r5[0][item.right.id];
        const variant2 = r5[1];
        const location_stack2 = r5[2];
        r55.current.add(right.id);
        const r67 = r54[0];
        const r68 = r54[3];
        r67(r68[8]).trackImpression({
          type: r67(r68[9]).ImpressionTypes.PANE,
          name: r67(r68[9]).ImpressionNames.GAME_COMMUNITY_MULTI_GUILD_UPSELL_CARD,
          properties: {
            game_id: game_id2,
            guild_id: right.id,
            location_stack: location_stack2,
            variant: variant2
          }
        });
      }
      if ("id" in item && item.id != null && !r5[3].current.has(item.id)) {
        const r93 = $env.$parent;
        const r94 = r5[3];
        const game_id3 = r5[0][item.id];
        const variant3 = r5[1];
        const location_stack3 = r5[2];
        r94.current.add(item.id);
        const r104 = r93[0];
        const r105 = r93[3];
        r104(r105[8]).trackImpression({
          type: r104(r105[9]).ImpressionTypes.PANE,
          name: r104(r105[9]).ImpressionNames.GAME_COMMUNITY_MULTI_GUILD_UPSELL_CARD,
          properties: {
            game_id: game_id3,
            guild_id: item.id,
            location_stack: location_stack3,
            variant: variant3
          }
        });
      }
    }
  };
}
let TwoColumnGuildUpsellList, useStyles, c10820_12;
let env10820 = {};
export function OneColumnGuildUpsellList({ suggestedGuilds: suggestedGuilds2, contentContainerStyle, subheader, onDismiss }) {
  let stateFromStoresObject;
  let env21793;
  stateFromStoresObject = void 0;
  const callback = useCallback((a0) => a0.id, []);
  stateFromStoresObject = useStateFromStoresObject([MobileGameCommunitiesStore], () => MobileGameCommunitiesStore.getGuildGameIds());
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.GAME_COMMUNITY_MULTI_GUILD_UPSELL_GUILDS_BAR_ENTRYPOINT).analyticsLocations;
  const callback2 = useCallback(({ item }) => <GameCommunityMultiGuildUpsellCard key={item.id} guild={item} gameId={stateFromStoresObject[item.id]} variant="one-column" onDismiss={stateFromStoresObject[item.id] != null ? onDismiss : null} />, [onDismiss, stateFromStoresObject]);
  const r40 = env21793 = {
    $parent: env10820
  };
  env21793[0] = stateFromStoresObject;
  env21793[1] = "one-column";
  env21793[2] = analyticsLocations;
  env21793[3] = void 0;
  env21793[3] = useRef(new Set());
  useFocusEffect(useCallback($mk95782(r40), []));
  return (0, jsx)(FlashList, {
    onViewableItemsChanged: useCallback($mk95783(r40), [stateFromStoresObject, analyticsLocations, "one-column"]),
    viewabilityConfig: c10820_12,
    contentContainerStyle,
    keyExtractor: callback,
    data: suggestedGuilds2,
    ListHeaderComponent: subheader,
    renderItem: callback2
  });
}
TwoColumnGuildUpsellList = function TwoColumnGuildUpsellList({ suggestedGuilds, contentContainerStyle, rowStyle, subheader, onDismiss: onDismiss2 }) {
  let stateFromStoresObject2;
  let env21795;
  stateFromStoresObject2 = void 0;
  const memo = useMemo(() => suggestedGuilds.reduce((acc, suggestedGuild, index) => {
    if (index % 2 === 0) {
      acc.push({
        left: suggestedGuild,
        right: suggestedGuilds[index + 1]
      });
    }
    return acc;
  }, []), [suggestedGuilds]);
  const callback = useCallback((a0) => {
    let r5 = a0.left?.id;
    if (r5 == null) {
      r5 = "";
    }
    let r6 = a0.right?.id;
    if (r6 == null) {
      r6 = "";
    }
    return `${r5}-${r6}`;
  }, []);
  stateFromStoresObject2 = useStateFromStoresObject([MobileGameCommunitiesStore], () => MobileGameCommunitiesStore.getGuildGameIds());
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.GAME_COMMUNITY_MULTI_GUILD_UPSELL_GUILDS_BAR_ENTRYPOINT).analyticsLocations;
  const r42 = env21795 = {
    $parent: env10820
  };
  env21795[0] = stateFromStoresObject2;
  env21795[1] = "two-column";
  env21795[2] = analyticsLocations;
  env21795[3] = void 0;
  env21795[3] = useRef(new Set());
  useFocusEffect(useCallback($mk95782(r42), []));
  return (0, jsx)(FlashList, {
    onViewableItemsChanged: useCallback($mk95783(r42), [stateFromStoresObject2, analyticsLocations, "two-column"]),
    viewabilityConfig: c10820_12,
    contentContainerStyle,
    keyExtractor: callback,
    data: memo,
    ListHeaderComponent: subheader,
    renderItem: useCallback(({ item }) => {
      const r1 = item.left?.id != null && stateFromStoresObject2[item.left.id] != null;
      const r25 = item.right?.id != null && stateFromStoresObject2[item.right.id] != null;
      return <View style={rowStyle}>
        {item.left != null && <GameCommunityMultiGuildUpsellCard guild={item.left} gameId={stateFromStoresObject2[item.left.id]} variant="two-column" onDismiss={r1 ? onDismiss2 : null} />}
        {item.right != null ? <GameCommunityMultiGuildUpsellCard guild={item.right} gameId={stateFromStoresObject2[item.right.id]} variant="two-column" onDismiss={r25 ? onDismiss2 : null} /> : (0, jsx)(View, {
          style: {
            flex: 1
          }
        })}
      </View>;
    }, [rowStyle, onDismiss2, stateFromStoresObject2])
  });
};
useStyles = createStyles((a0, a1) => ({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  headerWrapper: {
    flexDirection: "row",
    alignItems: "center",
    flexShrink: 0,
    paddingTop: a1,
    minHeight: a1 + MIN_HEADER_HEIGHT,
    paddingHorizontal: Module712.space.PX_8
  },
  headerTitle: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  subtitle: {
    alignSelf: "center",
    marginHorizontal: Module712.space.PX_24,
    marginBottom: Module712.space.PX_24,
    marginTop: Module712.space.PX_8,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    textAlign: "center"
  },
  listContent: {
    paddingHorizontal: Module712.space.PX_16,
    paddingBottom: a0
  },
  twoColumnRow: {
    flexDirection: "row",
    gap: Module712.space.PX_16,
    flex: 1
  }
}));
c10820_12 = {
  itemVisiblePercentThreshold: 50,
  minimumViewTime: 500
};
export default function GameCommunityMultiGuildUpsellModal(props) {
  const onClose = props.onClose;
  const safeAreaInsets_native = useSafeAreaInsets_native();
  const { top, bottom } = safeAreaInsets_native;
  const gradientTop = useGradientTop();
  const styles = useStyles(bottom, top);
  let c21796_1 = styles;
  const visualVariant = GameCommunityUpsellMultiExperiment.useConfig({
    location: "GameCommunityMultiGuildUpsellModal"
  }).visualVariant;
  const stateFromStoresArray = useStateFromStoresArray([MobileGameCommunitiesStore], () => MobileGameCommunitiesStore.getPresentableUpsellGuilds());
  const memo2 = useMemo(() => [c21796_1.headerWrapper, gradientTop], [styles.headerWrapper, gradientTop]);
  const memo = useMemo(() => <Text variant="text-sm/medium" color="text-muted" style={c21796_1.subtitle}>
    {intl.string(t["PH+G/A"])}
  </Text>, [styles.subtitle]);
  const callback = useCallback((a0, a1) => {
    dismissGuild(a0);
    AnalyticsUtils.track(AnalyticEvents.GAME_COMMUNITY_MULTI_GUILD_UPSELL_CARD_DISMISSED, {
      game_id: a1,
      guild_id: a0,
      variant: visualVariant
    });
  }, [visualVariant]);
  return <View style={styles.container}>
    <View style={memo2}>
      <HeaderIconButton source={Module9126} onPress={onClose} accessibilityLabel={intl.string(t.cpT0Cq)} />
      <View style={styles.headerTitle}>
        <Text variant="redesign/heading-18/bold" color="mobile-text-heading-primary" lineClamp={1}>
          {intl.string(t["fs+2Kn"])}
        </Text>
      </View>
      <View style={{
        width: 40
      }} />
    </View>
    <View style={{
      flex: 1
    }}>
      {visualVariant === "one-column" ? <OneColumnGuildUpsellList suggestedGuilds={stateFromStoresArray.slice(0, 8)} contentContainerStyle={styles.listContent} subheader={memo} onDismiss={callback} /> : null}
      {visualVariant === "two-column" ? <TwoColumnGuildUpsellList suggestedGuilds={stateFromStoresArray.slice(0, 20)} contentContainerStyle={styles.listContent} rowStyle={styles.twoColumnRow} subheader={memo} onDismiss={callback} /> : null}
    </View>
  </View>;
};
export { TwoColumnGuildUpsellList };