// Metro module 15164 (f15165).
import { memo } from "react";
import { Image as Image2, View } from "react-native";
import UserStore from "../../../stores/UserStore";
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
import Module712 from "../../../_bundle/Module712";
import GameIcon, { GameIconSizes, GameIconImageSize } from "../../game_detection/native/GameIcon";
import mobileAccountLinkingExperiment, { MobileAccountLinkingBannerSize } from "../experiments/mobileAccountLinkingExperiment";
import { scaleTextLineHeight } from "../../screen/native/useScaledTextLineHeight.android";
import { MEDIUM_BUTTON_HEIGHT, SMALL_BUTTON_HEIGHT } from "../../../design/components/Button/native/ButtonConstants.native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
import { Card } from "../../../design/components/Card/native/Card.native";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
import { Avatar, AvatarSizes } from "../../../design/void/native";
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 { ExperimentalGameControllerLinkIcon } from "../../../design/components/Icon/native/redesign/generated/ExperimentalGameControllerLinkIcon";
let PX_8, PX_82, PX_12, PX_16, PX_4, NORMAL, c10760_16, variant, variant2, PX_162, PX_122, useStyles, useStyles2, AccountLinkMediumBanner;
const AccountLinkLargeBanner = function AccountLinkLargeBanner(props) {
  let analyticsLocations;
  const { application, markAsDismissed, startAuthorization } = props;
  analyticsLocations = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  analyticsLocations = useAnalyticsLocations(AnalyticsLocation.MOBILE_ACCOUNT_LINK_LARGE_BANNER).analyticsLocations;
  const name = application.name;
  const reward_name = application.applicationAccountLinkBenefitConfig?.reward_name;
  return reward_name == null ? null : <Card variant="secondary" style={styles.card}>
    <PressableOpacity accessibilityRole="button" onPress={() => markAsDismissed(ContentDismissActionType.USER_DISMISS)} style={styles.closeButton}>
      <XSmallIcon size="sm" color="text-muted" />
    </PressableOpacity>
    <View style={styles.imagesContainer}>
      <GameIcon game={application} size={NORMAL} />
      <View style={styles.ellipsisContainer}>
        <View style={styles.ellipsisDot} />
        <View style={styles.ellipsisDot} />
        <View style={styles.ellipsisDot} />
      </View>
      <Avatar user={stateFromStores} size={AvatarSizes.LARGE_48} guildId={void 0} />
    </View>
    <Text variant={variant} color="mobile-text-heading-primary" style={styles.title}>
      {intl.formatToPlainString(t["3gpxqO"], {
        gameName: name
      })}
    </Text>
    <Text variant={variant2} color="text-muted" style={styles.body}>
      {intl.formatToPlainString(t.vxvKMm, {
        rewardName: reward_name
      })}
    </Text>
    <View style={styles.ctaContainer}>
      <Button variant="secondary" size="md" text={intl.string(t["0mvtKL"])} onPress={() => {
        startAuthorization({
          analyticsLocations
        });
      }} icon={<ExperimentalGameControllerLinkIcon size="sm" />} />
    </View>
  </Card>;
};
AccountLinkMediumBanner = function AccountLinkMediumBanner(props) {
  const { application, markAsDismissed: markAsDismissed2, startAuthorization: startAuthorization2 } = props;
  const styles2 = useStyles2();
  const analyticsLocations2 = useAnalyticsLocations(AnalyticsLocation.MOBILE_ACCOUNT_LINK_MEDIUM_BANNER).analyticsLocations;
  const name = application.name;
  const reward_name = application.applicationAccountLinkBenefitConfig?.reward_name;
  const reward_image = application.applicationAccountLinkBenefitConfig?.reward_image;
  return reward_name == null ? null : reward_image == null ? null : <Card variant="secondary" style={styles2.card}>
    <View style={styles2.contentContainer}>
      <Image2 source={{
        uri: reward_image
      }} style={styles2.rewardImage} resizeMode="contain" />
      <Text variant="heading-sm/semibold" color="mobile-text-heading-primary" style={styles2.bodyText}>
        {intl.formatToPlainString(t["V/C76E"], {
          gameName: name,
          rewardName: reward_name
        })}
      </Text>
      <PressableOpacity accessibilityRole="button" onPress={() => markAsDismissed2(ContentDismissActionType.USER_DISMISS)} style={styles2.closeButton}>
        <XSmallIcon size="sm" color="text-muted" />
      </PressableOpacity>
    </View>
    <View style={styles2.ctaContainer}>
      <Button variant="secondary" size="sm" text={intl.string(t["0mvtKL"])} onPress={() => {
        startAuthorization2({
          analyticsLocations: analyticsLocations2
        });
      }} icon={<ExperimentalGameControllerLinkIcon size="xs" />} />
    </View>
  </Card>;
};
PX_8 = Module712.space.PX_8;
PX_82 = Module712.space.PX_8;
PX_12 = Module712.space.PX_12;
PX_16 = Module712.space.PX_16;
PX_4 = Module712.space.PX_4;
NORMAL = GameIconSizes.NORMAL;
c10760_16 = GameIconImageSize[NORMAL];
variant = "heading-md/bold";
variant2 = "text-sm/medium";
PX_162 = Module712.space.PX_16;
PX_122 = Module712.space.PX_12;
useStyles = createStyles({
  card: {
    padding: PX_12
  },
  closeButton: {
    position: "absolute",
    top: Module712.space.PX_12,
    right: Module712.space.PX_12,
    width: 24,
    height: 24,
    alignItems: "center",
    justifyContent: "center",
    zIndex: 1
  },
  imagesContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center"
  },
  ellipsisContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginHorizontal: Module712.space.PX_8,
    gap: Module712.space.PX_4
  },
  ellipsisDot: {
    width: Module712.space.PX_4,
    height: Module712.space.PX_4,
    borderRadius: Module712.space.PX_4 / 2,
    backgroundColor: Module712.colors.INTERACTIVE_MUTED
  },
  title: {
    marginTop: PX_16,
    textAlign: "center"
  },
  body: {
    marginTop: PX_4,
    textAlign: "center"
  },
  ctaContainer: {
    marginTop: PX_162
  }
});
useStyles2 = createStyles({
  card: {
    padding: PX_12
  },
  closeButton: {
    width: 24,
    height: 24,
    alignItems: "center",
    justifyContent: "center",
    alignSelf: "flex-start"
  },
  contentContainer: {
    flexDirection: "row",
    gap: Module712.space.PX_12
  },
  rewardImage: {
    width: 48,
    height: 48
  },
  bodyText: {
    flexGrow: 1,
    flexShrink: 1,
    alignSelf: "center"
  },
  ctaContainer: {
    marginTop: PX_122,
    width: "100%"
  }
});
const r133 = memo(function(a0) {
  const config = mobileAccountLinkingExperiment.useConfig({
    location: "AccountLinkBanner"
  });
  const { enabled, bannerSize } = config;
  return enabled ? <>
    {[bannerSize === MobileAccountLinkingBannerSize.LARGE && <AccountLinkLargeBanner {...a0} />, bannerSize === MobileAccountLinkingBannerSize.MEDIUM && <AccountLinkMediumBanner {...a0} />]}
  </> : null;
});
export default r133;
export { PX_8 as ACCOUNT_LINK_BANNER_MARGIN_TOP };
export { PX_82 as ACCOUNT_LINK_BANNER_MARGIN_BOTTOM };
export function getScaledAccountLinkBannerHeight(a0) {
  const config = mobileAccountLinkingExperiment.getConfig({
    location: "getScaledAccountLinkBannerHeight"
  });
  const { enabled, bannerSize } = config;
  return enabled ? bannerSize === MobileAccountLinkingBannerSize.LARGE ? PX_8 + PX_12 + c10760_16 + PX_16 + scaleTextLineHeight(variant, a0) + PX_4 + 2 * scaleTextLineHeight(variant2, a0) + PX_162 + MEDIUM_BUTTON_HEIGHT + PX_12 + PX_82 : bannerSize === MobileAccountLinkingBannerSize.MEDIUM ? PX_8 + PX_12 + 48 + PX_122 + SMALL_BUTTON_HEIGHT + PX_12 + PX_82 : 0 : 0;
}