// Metro module 12067 (f12068).
import { useMemo } from "react";
import { Image as Image2, Pressable, View } from "react-native";
import LocaleStore from "../../user_settings/LocaleStore";
import AuthenticationStore from "../../../stores/AuthenticationStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { ApplicationWidgetLayoutName } from "../../../_bundle/Module12068";
import UserProfileApplicationWidgetTopHeroLayout, { HERO_IMAGE_UNCLIPPED_TOP_BLEED } from "../../application_widget/native/UserProfileApplicationWidgetTopHeroLayout";
import UserProfileApplicationWidgetTopContainedLayout from "../../application_widget/native/UserProfileApplicationWidgetTopContainedLayout";
import UserProfileApplicationWidgetBottomStatsLayout from "../../application_widget/native/UserProfileApplicationWidgetBottomStatsLayout";
import UserProfileApplicationWidgetBottomProgressLayout from "../../application_widget/native/UserProfileApplicationWidgetBottomProgressLayout";
import UserProfileApplicationWidgetBottomCollectionLayout from "../../application_widget/native/UserProfileApplicationWidgetBottomCollectionLayout";
import { useStateFromStores } from "../../../_bundle/Module589";
import { createCompactNumberFormat, bindResolveFieldValue } from "../../../_bundle/Module12070";
import MobileVisualRefreshExperiment from "../../themes/experiments/MobileVisualRefreshExperiment";
import { useGetOrFetchApplication } from "../../applications/useGetOrFetchApplications";
import { useGame } from "../../games/hooks/useGame";
import useOpenGameProfileModal from "../../game_profile/hooks/useOpenGameProfileModal";
import { GameProfileSources } from "../../game_profile/GameProfileAnalyticUtils";
import useApplicationWidgetLayoutRendererProps from "../../application_widget/hooks/useApplicationWidgetLayoutRendererProps";
import { ApplicationWidgetConfigSurface } from "../../../_bundle/Module12153";
import UserProfileCard from "./UserProfileCard";
import { getWidgetTitle } from "../WidgetUtils";
import { HourglassIcon } from "../../../design/components/Icon/native/redesign/generated/HourglassIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
const useStyles = createStyles({
  appIcon: {
    width: 16,
    height: 16,
    borderRadius: Module712.radii.xs,
    overflow: "hidden"
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_4
  },
  divider: {
    borderBottomWidth: 1,
    borderBottomColor: Module712.colors.BORDER_SUBTLE,
    marginBottom: Module712.space.PX_24
  },
  stillSyncing: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_4
  }
});
export default function UserProfileApplicationWidgetCard(props) {
  let c19383_2;
  const { userId, widget, cardStyle } = props;
  let isFirstWidget = props.isFirstWidget;
  if (isFirstWidget === void 0) {
    isFirstWidget = false;
  }
  c19383_2 = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([LocaleStore], () => LocaleStore.locale);
  const memo = useMemo(() => createCompactNumberFormat(stateFromStores), [stateFromStores]);
  const stateFromStores2 = useStateFromStores([AuthenticationStore], () => AuthenticationStore.getId() === userId);
  const r23 = MobileVisualRefreshExperiment("UserProfileCard");
  const getOrFetchApplication = useGetOrFetchApplication(widget.applicationId);
  const uri = getOrFetchApplication == null ? void 0 : getOrFetchApplication.getIconURL(16);
  const openGameProfileModal = useOpenGameProfileModal({
    location: "UserProfileApplicationWidgetCard",
    applicationId: useGame(getOrFetchApplication == null ? void 0 : getOrFetchApplication.getCanonicalGameId()).data?.id,
    source: GameProfileSources.UserProfileApplicationWidget,
    sourceUserId: userId,
    trackEntryPointImpression: true,
    stackingBehavior: "stack"
  });
  c19383_2 = openGameProfileModal;
  const applicationWidgetLayoutRendererProps = useApplicationWidgetLayoutRendererProps(userId, widget.applicationId);
  const { surfaceConfigs, resolutionContext, isLoading, hasIdentity } = applicationWidgetLayoutRendererProps;
  const topConfig = surfaceConfigs[ApplicationWidgetConfigSurface.WIDGET_TOP];
  const bottomConfig = surfaceConfigs[ApplicationWidgetConfigSurface.WIDGET_BOTTOM];
  const titleLeadingIcon = uri != null ? <Image2 source={{
    uri
  }} style={styles.appIcon} /> : null;
  if (stateFromStores2 && !isLoading && !hasIdentity) {
    return <UserProfileCard style={cardStyle} title={getWidgetTitle(widget)} titleLeadingIcon={titleLeadingIcon}>
      <View style={styles.stillSyncing}>
        <HourglassIcon size="xs" color={Module712.colors.TEXT_MUTED} />
        <Text variant="text-sm/medium" color="text-muted">
          {intl.string(t.z5K4Uv)}
        </Text>
      </View>
    </UserProfileCard>;
  }
  const resolveFieldValue = bindResolveFieldValue(resolutionContext);
  const header = <Pressable style={styles.header} onPress={() => c19383_2 == null ? void 0 : c19383_2()} disabled={openGameProfileModal == null} accessibilityRole="button" accessibilityLabel={getWidgetTitle(widget)}>
    {titleLeadingIcon}
    <Text variant={r23 ? "text-sm/medium" : "text-sm/semibold"} color={r23 ? "text-strong" : "text-default"} lineClamp={1}>
      {getWidgetTitle(widget)}
    </Text>
  </Pressable>;
  const layout = topConfig?.layout;
  const r158 = topConfig == null ? null : ApplicationWidgetLayoutName.WIDGET_TOP_HERO === layout ? <UserProfileApplicationWidgetTopHeroLayout header={header} topConfig={topConfig} resolveFieldValue={resolveFieldValue} numberFormat={memo} /> : ApplicationWidgetLayoutName.WIDGET_TOP_CONTAINED === layout ? <UserProfileApplicationWidgetTopContainedLayout header={header} topConfig={topConfig} resolveFieldValue={resolveFieldValue} numberFormat={memo} /> : null;
  const layout2 = bottomConfig?.layout;
  const r176 = bottomConfig == null ? null : ApplicationWidgetLayoutName.WIDGET_BOTTOM_STATS === layout2 ? <UserProfileApplicationWidgetBottomStatsLayout bottomConfig={bottomConfig} resolveFieldValue={resolveFieldValue} numberFormat={memo} /> : ApplicationWidgetLayoutName.WIDGET_BOTTOM_PROGRESS === layout2 ? <UserProfileApplicationWidgetBottomProgressLayout bottomConfig={bottomConfig} resolveFieldValue={resolveFieldValue} /> : ApplicationWidgetLayoutName.WIDGET_BOTTOM_COLLECTION === layout2 ? <UserProfileApplicationWidgetBottomCollectionLayout bottomConfig={bottomConfig} resolveFieldValue={resolveFieldValue} /> : null;
  const r198 = r158 == null;
  let r199 = null;
  if (!r198) {
    const r200 = r176 == null;
    r199 = null;
    if (!r200) {
      const style = [cardStyle, ,];
      if (isFirstWidget) {
        isFirstWidget = topConfig?.layout === ApplicationWidgetLayoutName.WIDGET_TOP_HERO;
      }
      if (isFirstWidget) {
        isFirstWidget = {
          marginTop: HERO_IMAGE_UNCLIPPED_TOP_BLEED
        };
      }
      style[1] = isFirstWidget;
      r199 = <UserProfileCard style={style}>
        {r158}
        <View style={styles.divider} />
        {r176}
      </UserProfileCard>;
    }
  }
  return r199;
};