// Metro module 8644 (f8645).
import { useCallback } from "react";
import { View } from "react-native";
import UserStore from "../../../../stores/UserStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useStartAuthorize from "../../../application_account_linking/native/useStartAuthorize";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { GameProfileTrackActionActions } from "../../GameProfileAnalyticUtils";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import FastImage from "../../../../components_native/common/FastImage";
import { Avatar, AvatarSizes } from "../../../../design/void/native";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { ExperimentalGameControllerLinkIcon } from "../../../../design/components/Icon/native/redesign/generated/ExperimentalGameControllerLinkIcon";
const useStyles = createStyles({
  container: {
    gap: Module712.space.PX_8
  },
  headerText: {
    paddingHorizontal: Module712.space.PX_8
  },
  card: {
    borderRadius: Module712.radii.lg,
    borderWidth: 1,
    borderColor: Module712.colors.BORDER_SUBTLE,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    padding: Module712.space.PX_16,
    gap: Module712.space.PX_16
  },
  cardImagesContainer: {
    flexDirection: "row",
    gap: Module712.space.PX_8,
    alignItems: "center",
    alignSelf: "center"
  },
  ellipseGroup: {
    flexDirection: "row",
    justifyContent: "space-between",
    gap: Module712.space.PX_4
  },
  ellipse: {
    width: 4,
    height: 4,
    backgroundColor: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY,
    opacity: 0.3,
    borderRadius: Module712.radii.round
  },
  cardImageApplication: {
    width: 48,
    height: 48,
    borderRadius: Module712.radii.sm
  },
  cardContent: {
    gap: Module712.space.PX_4,
    alignSelf: "center",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: Module712.space.PX_24
  },
  cardText: {
    textAlign: "center"
  }
});
export default function GameProfileLinkAccount(props) {
  const { game, trackAction, analyticsLocations } = props;
  const styles = useStyles();
  const startAuthorize = useStartAuthorize(game);
  const { fetched, hasAlreadyLinked, canStartAuthorization, startAuthorization, connectionApp } = startAuthorize;
  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  const callback = useCallback(() => {
    trackAction(GameProfileTrackActionActions.LinkAccount);
    startAuthorization({
      analyticsLocations
    });
  }, [trackAction, startAuthorization, analyticsLocations]);
  if (fetched && connectionApp != null && canStartAuthorization && !hasAlreadyLinked && stateFromStores != null) {
    const iconSource = connectionApp.getIconSource(48);
    return <View style={styles.container}>
      <Text variant="heading-sm/semibold" color="mobile-text-heading-primary" style={styles.headerText}>
        {intl.string(t["VDAhr+"])}
      </Text>
      <View style={styles.card}>
        {iconSource != null ? <View style={styles.cardImagesContainer}>
          <FastImage source={iconSource} style={styles.cardImageApplication} />
          <View style={styles.ellipseGroup}>
            <View style={styles.ellipse} />
            <View style={styles.ellipse} />
            <View style={styles.ellipse} />
          </View>
          <Avatar size={AvatarSizes.LARGE_48} user={stateFromStores} guildId={void 0} />
        </View> : null}
        <View style={styles.cardContent}>
          <Text variant="heading-md/semibold" color="mobile-text-heading-primary" style={styles.cardText}>
            {intl.formatToPlainString(t.hUbQT2, {
              gameName: connectionApp.name
            })}
          </Text>
          <Text variant="text-sm/medium" color="text-default" style={styles.cardText}>
            {intl.string(t["JKqu+4"])}
          </Text>
        </View>
        <Button variant="secondary" size="md" text={intl.string(t.jynBQ5)} onPress={callback} icon={<ExperimentalGameControllerLinkIcon size="sm" />} />
      </View>
    </View>;
  }
  return null;
};