// Metro module 13920 (f13921).
import * as Module19 from "react";
import { useMemo } from "react";
import { View } from "react-native";
import { FamilyCenterAction, TeenActionDisplayType } from "../FamilyCenterConstants";
import { AnalyticEvents } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useIsInAdultAgeGroup from "../hooks/useIsInAdultAgeGroup";
import { useActiveLinkUserIds, useActivityWindowTimeStamp, useActiveLinkUsers } from "../hooks/useUserLinks";
import { getActivityWindowTimestampFormatter, getSortedActivityTypeConfigs } from "../FamilyCenterUtils";
import { useAgeSpecificText } from "../hooks/useAgeSpecificText";
import { intl } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import { Icon, AVATAR_SIZE_MAP, AvatarSizes, Avatar } from "../../../design/void/native";
import Module13921 from "../../../_bundle/Module13921";
import { Text } from "../../../design/components/Text/native/Text";
import TouchableHitBox from "../../../design/void/TouchableHitBox/native/TouchableHitBox";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import Module6550 from "../../../_bundle/Module6550";
import FamilyCenterUsernameHeader from "./FamilyCenterUsernameHeader";
import { useSelectedTeenUser } from "../hooks/useSelectedTeenUser";
import { useFamilyCenterActions } from "../hooks/useFamilyCenterActions";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { presentFailedToast } from "../../toast/native/ToastUtils";
import UserUtils from "../../../utils/UserUtils";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import Module10737 from "../../../_bundle/Module10737";
import { useHasActionForAnyDisplayType } from "../hooks/useFamilyCenterActivities";
import FamilyCenterActivityTotal from "./FamilyCenterActivityTotal";
import FamilyCenterTopActivity from "./FamilyCenterTopActivity";
import FamilyCenterActivitySection from "./FamilyCenterActivitySection";
import FamilyCenterSettingsControls from "./FamilyCenterSettingsControls";
let c9712_10, useStyles, FamilyCenterHeaderSubText, useStyles2, Component, FamilyCenterActivityCardHeader, useStyles3, FamilyCenterActivityCardAccountSelect, useStyles4;
const FamilyCenterActivityCardPrefaceText = function FamilyCenterActivityCardPrefaceText() {
  const styles2 = useStyles();
  const isInAdultAgeGroup = useIsInAdultAgeGroup();
  const activeLinkUserIds = useActiveLinkUserIds();
  const activityWindowTimeStamp = useActivityWindowTimeStamp(getActivityWindowTimestampFormatter(!!isInAdultAgeGroup));
  const ageSpecificText = useAgeSpecificText(intl.formatToPlainString(FamilyCenter_messages.tazvHQ, {
    activeLinks: activeLinkUserIds.length
  }), intl.string(FamilyCenter_messages.KrLnkE));
  return <View style={styles2.container}>
    {isInAdultAgeGroup ? null : <Icon color={styles2.icon.color} source={Module13921} style={styles2.icon} />}
    <Text style={styles2.text} variant="text-xs/semibold" color="text-subtle">
      {activeLinkUserIds.length > 1 ? isInAdultAgeGroup ? activityWindowTimeStamp : ageSpecificText : ageSpecificText}
    </Text>
    <TouchableHitBox onPress={function onPress() {
      ModalActionCreators.pushLazy(import("./FamilyCenterModalDataTooltip"));
    }}>
      <Icon color={styles2.icon.color} source={Module6550} size={Icon.Sizes.EXTRA_SMALL} style={styles2.icon} />
    </TouchableHitBox>
  </View>;
};
FamilyCenterHeaderSubText = function FamilyCenterHeaderSubText() {
  const isInAdultAgeGroup = useIsInAdultAgeGroup();
  const activeLinkUserIds = useActiveLinkUserIds();
  const activityWindowTimeStamp = useActivityWindowTimeStamp(getActivityWindowTimestampFormatter(!!isInAdultAgeGroup));
  return isInAdultAgeGroup ? activeLinkUserIds.length > 1 ? null : <Text variant="text-sm/medium" color="text-muted">{activityWindowTimeStamp}</Text> : <Text variant="text-sm/medium" color="text-muted">{activityWindowTimeStamp}</Text>;
};
FamilyCenterActivityCardHeader = function FamilyCenterActivityCardHeader() {
  const activeLinkUserIds = useActiveLinkUserIds();
  const isInAdultAgeGroup = useIsInAdultAgeGroup();
  const selectedTeenUser2 = useSelectedTeenUser();
  return selectedTeenUser2 !== void 0 ? isInAdultAgeGroup && activeLinkUserIds.length !== 1 ? <FamilyCenterActivityCardAccountSelect /> : <View>
    <Component user={selectedTeenUser2} />
  </View> : null;
};
FamilyCenterActivityCardAccountSelect = function FamilyCenterActivityCardAccountSelect() {
  let memo;
  const styles3 = useStyles3();
  const activeLinkUsers = useActiveLinkUsers();
  const selectedTeenUser = useSelectedTeenUser();
  const selectTeenUser = useFamilyCenterActions({
    onSuccess: () => ActionSheetActionCreators.hideActionSheet(c9712_10),
    onError: () => presentFailedToast(intl.string(FamilyCenter_messages.Wu8BK2))
  }).selectTeenUser;
  memo = useMemo(() => activeLinkUsers.map((activeLinkUser) => ({
    label: `${UserUtils.getName(activeLinkUser)} (${UserUtils.getUserTag(activeLinkUser)})`,
    value: activeLinkUser.id
  })), [activeLinkUsers]);
  return selectedTeenUser !== void 0 ? <View>
    <TouchableHitBox style={styles3.touch} accessibilityRole="spinbutton" onPress={function onPress() {
      if (selectedTeenUser !== void 0) {
        ActionSheetActionCreators.openLazy(import("../../../components_native/common/ItemSelectorActionSheet"), c9712_10, {
          title: intl.string(FamilyCenter_messages.vORl9Q),
          items: memo,
          onItemSelect: (a0) => {
            if (a0 != null && a0 !== selectedTeenUser.id) {
              selectTeenUser(a0);
              AnalyticsUtils.track(AnalyticEvents.FAMILY_CENTER_ACTION, {
                action: FamilyCenterAction.SelectTeen
              });
            }
            setImmediate(() => {
              ActionSheetActionCreators.hideActionSheet(c9712_10);
            });
          },
          selectedItem: selectedTeenUser.id,
          hasIcons: false
        });
      }
    }}>
      <Component user={selectedTeenUser} inSelector />
      <Icon style={styles3.icon} size={Icon.Sizes.MEDIUM} source={Module10737} />
    </TouchableHitBox>
  </View> : null;
};
c9712_10 = "FamilyCenterTeenAccountSelect";
useStyles = createStyles({
  container: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center"
  },
  icon: {
    color: Module712.colors.ICON_SUBTLE,
    width: Module712.space.PX_16,
    height: Module712.space.PX_16
  },
  text: {
    marginHorizontal: Module712.space.PX_4
  }
});
useStyles2 = createStyles({
  header: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    padding: Module712.space.PX_12,
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST,
    borderTopLeftRadius: Module712.radii.md,
    borderTopRightRadius: Module712.radii.md
  },
  avatar: {
    borderRadius: AVATAR_SIZE_MAP[AvatarSizes.NORMAL] / 2,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  avatarContainer: {
    marginRight: Module712.space.PX_12,
    alignItems: "flex-start"
  },
  userHeader: {
    display: "flex",
    flexDirection: "column",
    width: "100%",
    paddingRight: Module712.space.PX_16
  },
  nonSelectorHeader: {
    flex: 1,
    paddingRight: Module712.space.PX_16
  }
});
Component = Module19.memo(({ user, inSelector }) => {
  const styles2 = useStyles2();
  return <View style={styles2.header}>
    <View style={styles2.avatarContainer}>
      <Avatar avatarStyle={styles2.avatar} user={user} guildId={void 0} disablePlaceholder avatarDecoration={user.avatarDecoration} size={inSelector ? AvatarSizes.SMALL : AvatarSizes.NORMAL} />
    </View>
    <View style={[styles2.userHeader, inSelector ? void 0 : styles2.nonSelectorHeader]}>
      <FamilyCenterUsernameHeader user={user} />
      <FamilyCenterHeaderSubText />
    </View>
  </View>;
});
Component.displayName = "FamilyCenterActivityCardAccount";
useStyles3 = createStyles({
  touch: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST,
    ...Module712.shadows.SHADOW_LOW
  },
  icon: {
    color: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
    width: Module712.space.PX_24,
    height: Module712.space.PX_24,
    transform: [{
      rotate: "90deg"
    }],
    marginHorizontal: Module712.space.PX_8
  }
});
useStyles4 = createStyles({
  card: {
    marginTop: Module712.space.PX_16
  },
  preface: {
    display: "flex",
    marginBottom: Module712.space.PX_12
  },
  container: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.md
  },
  content: {
    padding: Module712.space.PX_16,
    display: "flex",
    flexDirection: "column",
    gap: Module712.space.PX_32
  },
  totals: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    gap: Module712.space.PX_8
  },
  first: {
    width: "100%"
  },
  other: {
    width: "48.5%"
  },
  activities: {
    display: "flex",
    flexDirection: "column",
    gap: Module712.space.PX_32
  },
  settingsControls: {
    marginTop: Module712.space.PX_24
  }
});
export default function FamilyCenterActivityCard() {
  const styles = useStyles4();
  const selectedTeenUser2 = useSelectedTeenUser();
  const hasActionForAnyDisplayType = useHasActionForAnyDisplayType();
  if (selectedTeenUser2 === void 0) {
    return null;
  }
  const sortedActivityTypeConfigs = getSortedActivityTypeConfigs();
  return <View style={styles.card}>
    <View style={styles.preface}>
      <FamilyCenterActivityCardPrefaceText />
    </View>
    <View style={styles.container}>
      <FamilyCenterActivityCardHeader />
      <View style={styles.content}>
        <View style={styles.totals}>
          {sortedActivityTypeConfigs.filter((sortedActivityTypeConfig) => {
            const [r8] = sortedActivityTypeConfig;
            return r8 !== TeenActionDisplayType.GIFTS;
          }).map((item, index) => {
            const [displayType, , ] = item;
            return <View key={`total-${displayType}`} style={index === 0 ? styles.first : styles.other}>
              <FamilyCenterActivityTotal displayType={displayType} />
            </View>;
          })}
        </View>
        <FamilyCenterTopActivity />
        {hasActionForAnyDisplayType ? <View style={styles.activities}>
          {sortedActivityTypeConfigs.map((sortedActivityTypeConfig) => {
            const [displayType, , ] = sortedActivityTypeConfig;
            return <FamilyCenterActivitySection key={`section-${displayType}`} displayType={displayType} />;
          })}
        </View> : null}
      </View>
    </View>
    <View style={styles.settingsControls}>
      <FamilyCenterSettingsControls />
    </View>
  </View>;
};
export { Component as FamilyCenterActivityCardAccount };
export { FamilyCenterActivityCardHeader };
export { FamilyCenterActivityCardAccountSelect };