// Metro module 5531 (f5532).
import { useCallback, useMemo } from "react";
import { AnalyticEvents } from "../../../Constants";
import useTheme from "../../../hooks/useTheme";
import Platforms from "../../../lib/Platforms";
import { intl, t } from "../../../intl/index.native";
import getDefaultProviderDescription from "../getDefaultProviderDescription";
import { useStartProviderConnection } from "../../application_account_linking/native/useStartProviderConnection";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { collectGuildAnalyticsMetadata } from "../../app_analytics/AppAnalyticsUtils";
import { makeSource } from "../../../utils/AvatarUtils";
import * as _shared from "../../../design/shared";
import { Icon } from "../../../design/void/native";
import { LinkIcon } from "../../../design/components/Icon/native/redesign/generated/LinkIcon";
import ConnectionCardView from "./ConnectionCardView";
export default function ProviderConnectionCard(props) {
  const { connection, guildId, location: location2 } = props;
  const theme = useTheme();
  let c14904_3 = theme;
  let displayName = connection.provider_id != null ? Platforms.get(connection.provider_id)?.name : null;
  if (displayName == null) {
    displayName = intl.string(t.NzCoRx);
  }
  const description = connection.description != null && connection.description.length > 0 ? connection.description : getDefaultProviderDescription(connection.provider_id);
  const startProviderConnection = useStartProviderConnection(connection.provider_id);
  const { hasConnection, canConnect, startConnection, loading } = startProviderConnection;
  const callback = useCallback(async () => {
    const GUILD_ONBOARDING_CONNECTION_CLICKED = AnalyticEvents.GUILD_ONBOARDING_CONNECTION_CLICKED;
    const r30 = {
      ...collectGuildAnalyticsMetadata(guildId),
      connection_type: "provider"
    };
    const provider_id = connection.provider_id;
    if (provider_id == null) {
      provider_id = void 0;
    }
    r30.provider_id = provider_id;
    r30.location = location2;
    AnalyticsUtils.track(GUILD_ONBOARDING_CONNECTION_CLICKED, r30);
    await startConnection("Guild Onboarding");
  }, [startConnection, guildId, connection.provider_id, location2]);
  return <ConnectionCardView displayName={displayName} description={description} icon={useMemo(() => {
    if (connection.provider_id != null) {
      const r25 = Platforms.get(connection.provider_id);
      const r31 = r25?.icon != null;
      let r32 = null;
      if (r31) {
        const isThemeDark = _shared.isThemeDark(c14904_3);
        const icon = r25.icon;
        r32 = isThemeDark ? icon.darkPNG : icon.lightPNG;
      }
      return <Icon source={makeSource(r32)} style={{
        width: 32,
        height: 32
      }} disableColor />;
    }
    return <LinkIcon size="lg" color="text-subtle" />;
  }, [connection.provider_id, theme])} isLoading={loading} isConnected={hasConnection} canConnect={canConnect} onConnect={callback} />;
};