// Metro module 15237 (f15238).
import { useState, useMemo, useCallback } from "react";
import { Image as Image2, View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import GuildStore from "../../../stores/GuildStore";
import { AnalyticEvents, GuildFeatures, JoinGuildSources } from "../../../Constants";
import { getWindowDimensions } from "../../screen/useWindowDimensions.native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import AvatarUtils from "../../../utils/AvatarUtils";
import { getDevicePixelRatio } from "../../image_upload/ImageLoaderUtils";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import GuildActionCreators from "../../../actions/GuildActionCreators";
import { transitionToGuild } from "../../routing/transitionToGuild.native";
import { intl, t } from "../../../intl/index.native";
import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
import GuildBadgeV2 from "../../guild/native/GuildBadgeV2";
import { Icon } from "../../../design/void/native";
import { Text } from "../../../design/components/Text/native/Text";
import { Button } from "../../../design/components/Button/native/Button.native";
import { ContextMenu } from "../../../design/components/ContextMenu/native/ContextMenu.native";
import { IconButton } from "../../../design/components/Button/native/IconButton.native";
import { MoreHorizontalIcon } from "../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
const useStyles = createStyles((a0) => {
  const r7 = a0 === "one-column";
  const width = r7 ? 12 : 10;
  let r1 = 50;
  const width2 = r7 ? 56 : 50;
  if (r7) {
    r1 = 56;
  }
  const r5 = r1 / 2;
  const borderRadius = width / 2;
  return {
    card: {
      backgroundColor: Module712.colors.BG_SURFACE_RAISED,
      borderColor: Module712.colors.BORDER_MUTED,
      borderWidth: 1,
      borderRadius: Module712.radii.lg,
      overflow: "hidden",
      flex: 1,
      marginBottom: Module712.space.PX_16
    },
    bannerContainer: {
      height: r7 ? 88 : 80,
      backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT
    },
    banner: {
      flex: 1
    },
    content: {
      flex: 1,
      justifyContent: "space-between",
      marginTop: r7 ? 32 : 28,
      marginBottom: Module712.space.PX_12,
      marginHorizontal: Module712.space.PX_12
    },
    guildIconContainer: {
      position: "absolute",
      top: r7 ? 88 - r5 - 2 : 80 - r5 - 2,
      left: 16
    },
    guildIcon: {
      width: width2,
      height: width2,
      borderRadius: Module712.radii.lg
    },
    guildNameRow: {
      flexDirection: "row",
      alignItems: "center",
      marginBottom: Module712.space.PX_4
    },
    guildBadge: {
      marginRight: r7 ? Module712.space.PX_8 : Module712.space.PX_4
    },
    guildName: {
      flex: 1,
      minWidth: 0
    },
    description: {
      marginBottom: r7 ? Module712.space.PX_8 : Module712.space.PX_4
    },
    memberCounts: {
      flexDirection: "row",
      gap: Module712.space.PX_16
    },
    memberCount: {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      marginBottom: r7 ? Module712.space.PX_12 : Module712.space.PX_8,
      gap: 6
    },
    dot: {
      width,
      height: width,
      borderRadius,
      backgroundColor: Module712.colors.TEXT_STATUS_OFFLINE
    },
    dotOnline: {
      width,
      height: width,
      borderRadius,
      backgroundColor: Module712.colors.TEXT_STATUS_ONLINE
    },
    dismissButton: {
      position: "absolute",
      top: 8,
      right: 8,
      width: 2 * Module712.radii.lg,
      height: 2 * Module712.radii.lg,
      borderRadius: Module712.radii.lg,
      backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
      alignItems: "center",
      justifyContent: "center"
    }
  };
});
export default function GameCommunityMultiGuildUpsellCard(props) {
  let stateFromStores2, c21797_8, c21797_9;
  const { guild, gameId, variant, onDismiss } = props;
  stateFromStores2 = void 0;
  c21797_8 = void 0;
  c21797_9 = void 0;
  const styles = useStyles(variant);
  const [state, setState] = useState(false);
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guild.id) != null);
  let r26 = variant === "one-column";
  let r0 = 50;
  const r2 = r26 ? 56 : 50;
  c21797_8 = r2;
  const memo = useMemo(() => {
    let icon = guild.icon;
    if (icon == null) {
      icon = null;
    }
    return AvatarUtils.getGuildIconSource({
      id: guild.id,
      icon,
      canAnimate: !stateFromStores,
      size: c21797_8 * getDevicePixelRatio()
    });
  }, [guild.id, guild.icon, stateFromStores, r2]);
  const r58 = stateFromStores ? !stateFromStores : guild.features.has(GuildFeatures.ANIMATED_BANNER) === true;
  c21797_9 = r58;
  const memo2 = useMemo(() => {
    let r12;
    const { splash, banner } = guild;
    if (splash != null) {
      const width = getWindowDimensions().width;
      r12 = AvatarUtils.getGuildSplashSource({
        id: guild.id,
        splash,
        size: (variant !== "one-column" ? width / 2 : width) * getDevicePixelRatio()
      });
    } else {
      r12 = banner != null ? AvatarUtils.getAnimatableSourceWithFallback(c21797_9, (a0) => AvatarUtils.getGuildBannerSource({
        id: guild.id,
        banner
      }, a0)) : null;
    }
    return r12;
  }, [guild.id, guild.splash, guild.banner, r58, variant]);
  const callback2 = useCallback(async () => {
    let c27970_2;
    let c27970_3 = 0;
    L16: {
      try {
        if (stateFromStores2) {
          break L16;
        }
        if (state) {
          break L16;
        }
        setState(true);
        AnalyticsUtils.track(AnalyticEvents.GAME_COMMUNITY_MULTI_GUILD_UPSELL_CARD_JOINED, {
          guild_id: guild.id,
          game_id: gameId,
          variant
        });
        c27970_3 = 1;
        await GuildActionCreators.joinGuild(guild.id, {
          source: JoinGuildSources.GAME_COMMUNITY_UPSELL,
          autoNavigate: false
        });
        await GuildActionCreators.waitForGuild(guild.id);
        c27970_3 = 0;
        (0, setState)(false);
      } catch ($e) {
        const r29 = $e;
        let r7 = r29;
        c27970_2 = r29;
        if (c27970_3 !== 0) {
          while (true) {
            try {
              const r110 = c27970_2;
              c27970_3 = 0;
              (0, setState)(false);
              throw r110;
            } catch (r107) {
              r7 = r107;
              c27970_2 = r107;
              if (c27970_3 === 0) {
                break;
              }
            }
          }
        }
        throw r7;
      }
      return void 0;
    }
  }, [guild.id, stateFromStores2, state, gameId, variant]);
  const callback = useCallback(() => {
    transitionToGuild(guild.id);
  }, [guild.id]);
  const memo3 = useMemo(() => onDismiss == null ? [] : [{
    label: intl.string(t.XW1okC),
    variant: "destructive",
    action: () => onDismiss(guild.id, gameId)
  }], [guild.id, gameId, onDismiss]);
  let presenceCount = guild.presenceCount;
  if (presenceCount == null) {
    presenceCount = 0;
  }
  let memberCount = guild.memberCount;
  if (memberCount == null) {
    memberCount = 0;
  }
  const { name, description } = guild;
  if (r26) {
    r0 = 56;
  }
  const r4 = r0 / 2;
  const width = r2 + 8;
  const r122 = [<View style={styles.bannerContainer}>
    <ClipView style={styles.banner} cutouts={[{
      shape: CutoutShape.RoundedRect,
      x: 12,
      y: (r26 ? 88 - r4 - 2 : 80 - r4 - 2) - 4,
      width,
      height: width,
      cornerRadius: Module712.radii.lg + 4
    }]}>
      {memo2 != null ? <Image2 style={styles.banner} source={memo2} resizeMode="cover" /> : <View style={styles.banner} />}
    </ClipView>
  </View>, <View style={styles.guildIconContainer}>
    <Image2 style={styles.guildIcon} source={memo} />
  </View>, , ,];
  const Sizes = Icon.Sizes;
  const r165 = [<View>
    <View style={styles.guildNameRow}>
      <GuildBadgeV2 guild={guild} size={r26 ? Sizes.REFRESH_SMALL_16 : Sizes.EXTRA_SMALL} style={styles.guildBadge} />
      <Text variant={r26 ? "heading-md/bold" : "heading-sm/bold"} color="mobile-text-heading-primary" accessibilityRole="header" style={styles.guildName} lineClamp={1}>{name}</Text>
    </View>
    {description != null && description.length > 0 && <Text variant={r26 ? "text-sm/medium" : "text-xs/medium"} style={styles.description} lineClamp={3}>{description}</Text>}
  </View>, ,];
  const r191 = [presenceCount > 0 && <View style={styles.memberCount}>
    <View style={styles.dotOnline} />
    <Text variant="text-xs/medium" color="text-subtle">
      {intl.format(t["LC+S+m"], {
        membersOnline: presenceCount
      })}
    </Text>
  </View>, ,];
  if (r26) {
    r26 = memberCount > 0;
  }
  if (r26) {
    r26 = <View style={styles.memberCount}>
      <View style={styles.dot} />
      <Text variant="text-xs/medium" color="text-subtle">
        {intl.format(t.zRl6XR, {
          count: memberCount
        })}
      </Text>
    </View>;
  }
  r191[1] = r26;
  r165[1] = <View>
    <View style={styles.memberCounts}>{r191}</View>
    <Button {...stateFromStores2 ? {
      variant: "active",
      size: "sm",
      text: intl.string(t.KLOhbO),
      onPress: callback,
      grow: true
    } : {
      variant: "primary",
      size: "sm",
      loading: state,
      text: intl.string(t.VJlc0S),
      onPress: callback2,
      grow: true
    }} />
  </View>;
  r122[2] = <View style={styles.content}>{r165}</View>;
  r122[3] = memo3.length > 0 && <View style={styles.dismissButton}>
    <ContextMenu items={memo3}>
      {(a0) => {
        const { ref, ...rest } = a0;
        return <IconButton ref={a0.ref} {...rest} icon={<MoreHorizontalIcon size="sm" />} size="sm" variant="secondary-overlay" accessibilityLabel={intl.string(t.ogxXGq)} />;
      }}
    </ContextMenu>
  </View>;
  return <View style={styles.card}>{r122}</View>;
};