discord-decomp/modules/parent_tools/native/FamilyCenterSettingsControls.tsx

// Metro module 13937 (f13938).
import { useEffect } from "react";
import { View } from "react-native";
import { FamilyCenterSubPages } from "../FamilyCenterConstants";
import { UserSettingsSections } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { useSpendingLimitDisplayState, useSpendingLimitFromUserSettings } from "../SpendingLimitDisplay";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import { useActiveLinkUserIds } from "../hooks/useUserLinks";
import { useSelectedTeenUser, useShouldLoadSettingsForSelectedTeenUser } from "../hooks/useSelectedTeenUser";
import { useIsFamilyCenterV3Enabled } from "../FamilyCenterV3Experiment";
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
import useScheduleTimeControlsRowProps from "../hooks/useScheduleTimeControlsRowProps";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import { popLayer } from "../../../actions/LayerActionCreators";
import ChannelActionCreators from "../../../actions/ChannelActionCreators";
import { ParentalControlledSpendingLimit } from "../../user_settings/family_center/ParentalControlledUserSettings";
import FamilyCenterActionCreators from "../FamilyCenterActionCreators";
import useUserIsTeenAgeGroup from "../hooks/useUserIsTeenAgeGroup";
let useStyles, FamilyCenterSettingsTeenControls, FamilyCenterSettingsParentalControls;
const SpendingLimitRow = function SpendingLimitRow(props) {
  const { cap, teenId } = props;
  const styles = useStyles();
  const spendingLimitDisplayState = useSpendingLimitDisplayState(cap);
  const kind = spendingLimitDisplayState.kind;
  const r26 = kind === "off" ? {
    trailing: <Text variant="text-sm/normal" color="text-muted">
      {intl.string(FamilyCenter_messages.YEnpaj)}
    </Text>
  } : kind === "on" ? {
    trailing: <Text variant="text-sm/normal" color="text-muted">{spendingLimitDisplayState.monthlyText}</Text>
  } : kind === "close-to-limit" ? {
    trailing: <Text variant="text-sm/normal" color="text-muted">{spendingLimitDisplayState.monthlyText}</Text>,
    subLabel: <Text variant="text-sm/normal" style={styles.subLabelWarning}>{spendingLimitDisplayState.remainingText}</Text>
  } : kind === "spent" ? {
    trailing: <Text variant="text-sm/normal" color="text-muted">{spendingLimitDisplayState.monthlyText}</Text>,
    subLabel: <Text variant="text-sm/normal" style={styles.subLabelCritical}>
      {intl.string(FamilyCenter_messages.Q2msVQ)}
    </Text>
  } : kind === "blocked" ? {
    trailing: <Text variant="text-sm/normal" color="text-muted">
      {intl.string(FamilyCenter_messages.kGFuGn)}
    </Text>,
    subLabel: <Text variant="text-sm/normal" style={styles.subLabelCritical}>
      {intl.string(FamilyCenter_messages.FUu2b0)}
    </Text>
  } : void 0;
  const { trailing, subLabel } = r26;
  const disabled = teenId == null;
  return <TableRow label={intl.string(FamilyCenter_messages.gMeekL)} trailing={trailing} subLabel={subLabel} onPress={disabled ? void 0 : () => {
    ModalActionCreators.pushLazy(import("./ChangeSpendingLimitModal"), {
      teenId
    }, void 0, {
      animation: "slide_from_right"
    });
  }} arrow={!disabled} disabled={disabled} />;
};
FamilyCenterSettingsTeenControls = function FamilyCenterSettingsTeenControls() {
  let activeLinkUserIds, navigation;
  const handleOpenSettings2 = function handleOpenSettings() {
    navigation.navigate(UserSettingsSections.CONTENT_AND_SOCIAL);
  };
  const styles = useStyles();
  activeLinkUserIds = useActiveLinkUserIds();
  const selectedTeenUser2 = useSelectedTeenUser();
  let r8 = useIsFamilyCenterV3Enabled({
    location: "FamilyCenterSettingsControls"
  });
  navigation = useNavigation();
  let r9 = selectedTeenUser2 == null ? void 0 : selectedTeenUser2.restrictedSchedule?.rules;
  if (r9 == null) {
    r9 = [];
  }
  const spendingLimitFromUserSettings = useSpendingLimitFromUserSettings();
  const scheduleTimeControlsRowProps = useScheduleTimeControlsRowProps(r9);
  const { subLabel, trailing } = scheduleTimeControlsRowProps;
  const r83 = [<Stack style={styles.controlledSettingsHeader}>
    <Text variant="text-sm/semibold">
      {intl.string(FamilyCenter_messages.ahKIJO)}
    </Text>
    <Text variant="text-sm/medium" color="text-muted">
      {intl.format(FamilyCenter_messages.X9rW0j, {
        openSettingsHook: (a0, a1) => <Text key={a1} variant="text-sm/medium" color="text-link" onPress={handleOpenSettings2}>
          {a0}
        </Text>
      })}
    </Text>
  </Stack>, , ,];
  const r84 = r9;
  if (r8) {
    r8 = <View style={styles.controlsGroup}>
      <TableRowGroup hasIcons={false}>
        <SpendingLimitRow cap={spendingLimitFromUserSettings} />
        <TableRow label={intl.string(FamilyCenter_messages["1Op+NP"])} subLabel={subLabel} trailing={trailing} onPress={r84.length > 0 ? function() {
          navigation.navigate(UserSettingsSections.FAMILY_CENTER_PARENTAL_CONTROLS, {
            selectedSubPage: FamilyCenterSubPages.SCREEN_TIME_CONTROLS
          });
        } : void 0} arrow={r84.length > 0} />
      </TableRowGroup>
    </View>;
  }
  r83[1] = r8;
  r83[2] = <Button text={intl.formatToPlainString(FamilyCenter_messages.w0JA3P, {
    count: activeLinkUserIds.length
  })} onPress={function onPress() {
    popLayer();
    ChannelActionCreators.openPrivateChannel({
      recipientIds: activeLinkUserIds
    });
  }} shrink grow={false} variant="secondary" size="sm" />;
  return <Stack style={styles.teenControlsContainer}>{r83}</Stack>;
};
FamilyCenterSettingsParentalControls = function FamilyCenterSettingsParentalControls() {
  const styles = useStyles();
  const selectedTeenUser = useSelectedTeenUser();
  const shouldLoadSettingsForSelectedTeenUser = useShouldLoadSettingsForSelectedTeenUser();
  const isFamilyCenterV3Enabled = useIsFamilyCenterV3Enabled({
    location: "FamilyCenterSettingsControls"
  });
  const navigation2 = useNavigation();
  let r39 = selectedTeenUser == null ? void 0 : selectedTeenUser.restrictedSchedule?.rules;
  if (r39 == null) {
    r39 = [];
  }
  let c20798_3 = r39;
  const controlledSetting = ParentalControlledSpendingLimit.useControlledSetting(selectedTeenUser?.id);
  useEffect(() => {
    if (selectedTeenUser?.id != null && shouldLoadSettingsForSelectedTeenUser) {
      FamilyCenterActionCreators.fetchTeenSettingsAndConsents(selectedTeenUser.id);
    }
  }, [selectedTeenUser?.id, shouldLoadSettingsForSelectedTeenUser]);
  const scheduleTimeControlsRowProps = useScheduleTimeControlsRowProps(r39);
  const { subLabel, trailing } = scheduleTimeControlsRowProps;
  return <Stack style={styles.parentalControlsContainer}>
    <Text variant="text-sm/semibold">
      {intl.string(FamilyCenter_messages.ahKIJO)}
    </Text>
    <Text variant="text-sm/medium" color="text-muted">
      {intl.string(FamilyCenter_messages.Sv236e)}
    </Text>
    <View style={styles.controlsGroup}>
      <TableRowGroup hasIcons={false}>
        <TableRow label={intl.string(t["+o1pDZ"])} onPress={() => {
          navigation2.navigate(UserSettingsSections.FAMILY_CENTER_PARENTAL_CONTROLS, {
            selectedSubPage: FamilyCenterSubPages.CONTENT_AND_SOCIAL
          });
        }} arrow />
        <TableRow label={intl.string(t.OAuOHD)} onPress={() => {
          navigation2.navigate(UserSettingsSections.FAMILY_CENTER_PARENTAL_CONTROLS, {
            selectedSubPage: FamilyCenterSubPages.DATA_AND_PRIVACY
          });
        }} arrow />
        {(isFamilyCenterV3Enabled ? selectedTeenUser?.id != null : isFamilyCenterV3Enabled) && <SpendingLimitRow cap={controlledSetting} teenId={selectedTeenUser.id} />}
        {isFamilyCenterV3Enabled && selectedTeenUser?.id != null && <TableRow label={intl.string(FamilyCenter_messages["1Op+NP"])} subLabel={subLabel} trailing={trailing} onPress={function onPress() {
          navigation2.navigate(UserSettingsSections.FAMILY_CENTER_PARENTAL_CONTROLS, {
            selectedSubPage: FamilyCenterSubPages.SCREEN_TIME_CONTROLS,
            autoOpenCreate: c20798_3.length === 0 && selectedTeenUser?.id != null
          });
        }} arrow />}
      </TableRowGroup>
    </View>
  </Stack>;
};
useStyles = createStyles({
  teenControlsContainer: {
    gap: Module712.space.PX_16
  },
  controlledSettingsHeader: {
    gap: Module712.space.PX_4
  },
  parentalControlsContainer: {
    gap: Module712.space.PX_4
  },
  controlsGroup: {
    marginTop: Module712.space.PX_8
  },
  subLabelWarning: {
    color: Module712.colors.ICON_FEEDBACK_WARNING
  },
  subLabelCritical: {
    color: Module712.colors.TEXT_FEEDBACK_CRITICAL
  }
});
export default function FamilyCenterSettingsControls() {
  const userIsTeenAgeGroup = useUserIsTeenAgeGroup();
  return useActiveLinkUserIds().length !== 0 ? <View>
    {userIsTeenAgeGroup ? <FamilyCenterSettingsTeenControls /> : <FamilyCenterSettingsParentalControls />}
  </View> : null;
};