// Metro module 13938 (f13939).
import { useMemo } from "react";
import { View, StyleSheet } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { WarningIcon } from "../../../design/components/Icon/native/redesign/generated/WarningIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import { useChangeSpendingLimitFormState } from "../ChangeSpendingLimitFormState";
import ToastActionCreators from "../../toast/native/ToastActionCreators";
import { CircleCheckIcon } from "../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { presentFailedToast } from "../../toast/native/ToastUtils";
import { formatPrice } from "../../../utils/PriceUtils";
import { ModalScreen } from "../../../design/components/Modal/native/ModalScreen.native";
import { ModalContent } from "../../../design/components/Modal/native/ModalContent.native";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import { TextInput } from "../../../design/components/TextInput/native/TextInput.native";
import { ModalFooter } from "../../../design/components/Modal/native/ModalFooter.native";
import { ButtonGroup } from "../../../design/components/ButtonGroup/native/ButtonGroup.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import { getHeaderCloseButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
import { Modal } from "../../../design/components/Modal/native/Modal.native";
let useStyles;
const ChangeSpendingLimitScreen = function ChangeSpendingLimitScreen(props) {
  let save;
  const teenId3 = props.teenId;
  save = void 0;
  let _handleSave2 = function _handleSave() {
    const r9 = async () => {
      let c30678_2 = 0;
      L10: {
        try {
          c30678_2 = 1;
          await save();
          ToastActionCreators.open({
            key: "SPENDING_CONTROLS_CHANGED",
            content: intl.string(FamilyCenter_messages["2WKfG1"]),
            IconComponent: CircleCheckIcon,
            iconColor: "status-positive"
          });
          ModalActionCreators.pop();
          c30678_2 = 0;
        } catch ($e) {
          let r25 = $e;
          if (c30678_2 !== 0) {
            while (true) {
              try {
                c30678_2 = 0;
                presentFailedToast(intl.string(FamilyCenter_messages.Wu8BK2));
                break L10;
              } catch ($e) {
                r25 = $e;
                if (c30678_2 === 0) {
                  break;
                }
              }
            }
          }
          throw r25;
        }
      }
    };
    _handleSave2 = r9;
    return r9.apply(this, arguments);
  };
  const styles = useStyles();
  const changeSpendingLimitFormState = useChangeSpendingLimitFormState(teenId3);
  const { amountInput, handleAmountChange, currency, currencySymbol, exponent, isClearingCap, isOverspending, canSave, isSubmitting, renewalDate, monthlySpend } = changeSpendingLimitFormState;
  save = changeSpendingLimitFormState.save;
  const amount = monthlySpend != null ? monthlySpend > 0 ? formatPrice(monthlySpend, currency) : null : null;
  const r48 = amountInput.length > 0;
  const r71 = [<Text variant="text-sm/normal">
    {intl.string(FamilyCenter_messages.IFguF2)}
  </Text>, ,];
  const r90 = [<Text variant="text-sm/semibold" color="text-subtle">
    {intl.string(FamilyCenter_messages["1fHSu2"])}
  </Text>, <View>
    <TextInput accessibilityLabel={intl.string(FamilyCenter_messages["1fHSu2"])} value={amountInput} onChange={handleAmountChange} leadingText={r48 ? currencySymbol : void 0} placeholder={intl.string(FamilyCenter_messages.DjSv82)} keyboardType={exponent > 0 ? "decimal-pad" : "number-pad"} isClearable />
    {isOverspending ? <View style={styles.warningOverlay} pointerEvents="none" /> : null}
  </View>, ,];
  const r122 = amount == null ? null : isOverspending ? <View style={styles.warningRow}>
    <WarningIcon size="xs" color={Module712.colors.ICON_FEEDBACK_WARNING} />
    <Text variant="text-sm/normal" style={styles.warningText}>
      {intl.formatToPlainString(FamilyCenter_messages.Tk6x4X, {
        amount,
        date: renewalDate
      })}
    </Text>
  </View> : <Text variant="text-sm/normal" color="text-muted">
    {intl.formatToPlainString(FamilyCenter_messages.pfAlRY, {
      amount
    })}
  </Text>;
  const handleSave = function handleSave() {
    return _handleSave2.apply(this, arguments);
  };
  r90[2] = r122;
  r71[1] = <Stack spacing={Module712.space.PX_8}>{r90}</Stack>;
  return <ModalScreen>
    <ModalContent>
      <Stack spacing={Module712.space.PX_16}>{r71}</Stack>
    </ModalContent>
    <ModalFooter>
      <ButtonGroup>
        <Button {...isClearingCap ? {
          variant: "destructive",
          text: intl.string(FamilyCenter_messages.JZDGJ8),
          onPress: handleSave,
          disabled: isSubmitting,
          loading: isSubmitting
        } : {
          text: intl.string(t["R3BPH+"]),
          onPress: handleSave,
          disabled: canSave ? isSubmitting : !canSave,
          loading: isSubmitting
        }} />
        <Button variant="tertiary" text={intl.string(t["ETE/oC"])} onPress={ModalActionCreators.pop} />
      </ButtonGroup>
    </ModalFooter>
  </ModalScreen>;
};
useStyles = createStyles({
  warningOverlay: {
    ...StyleSheet.absoluteFillObject,
    borderRadius: Module712.modules.mobile.INPUT_FIELD_RADIUS_LG,
    borderWidth: 1,
    borderColor: Module712.colors.ICON_FEEDBACK_WARNING,
    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_WARNING
  },
  warningRow: {
    flexDirection: "row",
    gap: Module712.space.PX_8,
    alignItems: "flex-start"
  },
  warningText: {
    flex: 1,
    color: Module712.colors.ICON_FEEDBACK_WARNING
  }
});
export default function ChangeSpendingLimitModal(props) {
  const teenId = props.teenId;
  return <Modal initialRouteName="CHANGE_SPENDING_LIMIT" screens={useMemo(() => {
    const teenId2 = teenId;
    return {
      CHANGE_SPENDING_LIMIT: {
        headerShown: true,
        headerLeft: getHeaderCloseButton(ModalActionCreators.pop),
        headerTitle: () => <Text variant="text-md/semibold">
          {intl.string(FamilyCenter_messages.xMRO6A)}
        </Text>,
        render: () => <ChangeSpendingLimitScreen teenId={teenId2} />
      }
    };
  }, [teenId])} headerBackTitle={intl.string(t["13/7kX"])} />;
};