// Metro module 5514 (f5515).
import { useEffect, useCallback } from "react";
import ApplicationStore from "../../applications/ApplicationStore";
import { AnalyticEvents } from "../../../Constants";
import { useStateFromStores } from "../../../_bundle/Module589";
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
import { fetchApplication } from "../../applications/ApplicationActionCreators";
import { intl, t } from "../../../intl/index.native";
import useStartAuthorize from "../../application_account_linking/native/useStartAuthorize";
import GameIcon, { GameIconSizes } from "../../game_detection/native/GameIcon";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { collectGuildAnalyticsMetadata } from "../../app_analytics/AppAnalyticsUtils";
import ConnectionCardView from "./ConnectionCardView";
export default function ApplicationConnectionCard(props) {
  let analyticsLocations, startAuthorization;
  const { connection, guildId, location: location2 } = props;
  analyticsLocations = void 0;
  startAuthorization = void 0;
  const stateFromStores = useStateFromStores([ApplicationStore], () => connection.application_id != null ? ApplicationStore.getApplication(connection.application_id) : null, [connection.application_id]);
  analyticsLocations = useAnalyticsLocations(location2).analyticsLocations;
  useEffect(() => {
    if (!(stateFromStores != null || connection.application_id == null || ApplicationStore.isFetchingApplication(connection.application_id) || ApplicationStore.didFetchingApplicationFail(connection.application_id))) {
      fetchApplication(connection.application_id).catch(() => {});
    }
  }, [stateFromStores, connection.application_id]);
  let displayName = stateFromStores?.name;
  if (displayName == null) {
    displayName = intl.string(t.cgPbaZ);
  }
  const startAuthorize = useStartAuthorize(stateFromStores);
  const { hasAlreadyLinked, canStartAuthorization } = startAuthorize;
  startAuthorization = startAuthorize.startAuthorization;
  return <ConnectionCardView displayName={displayName} description={connection.description} icon={<GameIcon game={stateFromStores} size={GameIconSizes.SMALL} />} isLoading={!startAuthorize.fetched} isConnected={hasAlreadyLinked} canConnect={canStartAuthorization} onConnect={useCallback(() => {
    const GUILD_ONBOARDING_CONNECTION_CLICKED = AnalyticEvents.GUILD_ONBOARDING_CONNECTION_CLICKED;
    const r14 = {
      ...collectGuildAnalyticsMetadata(guildId),
      connection_type: "application"
    };
    let application_id = connection.application_id;
    if (application_id == null) {
      application_id = void 0;
    }
    r14.application_id = application_id;
    r14.location = location2;
    AnalyticsUtils.track(GUILD_ONBOARDING_CONNECTION_CLICKED, r14);
    startAuthorization({
      analyticsLocations
    });
  }, [startAuthorization, guildId, connection.application_id, location2, analyticsLocations])} />;
};