// Metro module 13958 (f13959).
import { useCallback, useMemo } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useIsInAdultAgeGroup from "../hooks/useIsInAdultAgeGroup";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { presentFailedToast } from "../../toast/native/ToastUtils";
import { intl, t } from "../../../intl/index.native";
import { useFamilyCenterActions } from "../hooks/useFamilyCenterActions";
import Module38 from "../../../_bundle/Module38";
import { ModalScreen } from "../../../design/components/Modal/native/ModalScreen.native";
import { ModalContent } from "../../../design/components/Modal/native/ModalContent.native";
import FamilyCenterAvatarPair from "./FamilyCenterAvatarPair";
import Module7699 from "../../../_bundle/Module7699";
import { Text } from "../../../design/components/Text/native/Text";
import FamilyCenter_messages from "../FamilyCenter.messages";
import FamilyCenterUsernameHeader from "./FamilyCenterUsernameHeader";
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 FamilyCenterModalCancelScreen = function FamilyCenterModalCancelScreen(props) {
  let cancelLinkRequest;
  const otherUser = props.otherUser;
  cancelLinkRequest = void 0;
  const styles = useStyles();
  const isInAdultAgeGroup = useIsInAdultAgeGroup();
  const familyCenterActions = useFamilyCenterActions({
    onSuccess: useCallback(() => {
      ModalActionCreators.pop();
    }, []),
    onError: useCallback(() => {
      presentFailedToast(intl.string(t.R0RpRX));
    }, [])
  });
  cancelLinkRequest = familyCenterActions.cancelLinkRequest;
  const isCancelLoading = familyCenterActions.isCancelLoading;
  const callback = useCallback(() => {
    cancelLinkRequest(otherUser.id);
  }, [cancelLinkRequest, otherUser.id]);
  Module38(isInAdultAgeGroup, "FamilyCenterCancelModal should only be rendered for parents.");
  return <ModalScreen>
    <ModalContent>
      <View style={styles.header}>
        <FamilyCenterAvatarPair otherUser={otherUser} iconSrc={Module7699} />
        <Text style={styles.headerText} variant="text-lg/bold">
          {intl.string(FamilyCenter_messages.HynllX)}
        </Text>
        <FamilyCenterUsernameHeader user={otherUser} />
      </View>
    </ModalContent>
    <ModalFooter>
      <ButtonGroup>
        <Button variant="destructive" disabled={isCancelLoading} loading={isCancelLoading} text={intl.string(FamilyCenter_messages.mK40bk)} onPress={callback} />
        <Button variant="tertiary" text={intl.string(FamilyCenter_messages.czincX)} onPress={ModalActionCreators.pop} />
      </ButtonGroup>
    </ModalFooter>
  </ModalScreen>;
};
useStyles = createStyles({
  header: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    marginBottom: Module712.space.PX_16
  },
  headerText: {
    marginTop: Module712.space.PX_16,
    marginBottom: Module712.space.PX_4
  }
});
export default function FamilyCenterModalCancel(props) {
  const otherUser2 = props.otherUser;
  return <Modal initialRouteName="CANCEL" screens={useMemo(() => {
    const otherUser3 = otherUser2;
    return {
      CANCEL: {
        headerShown: true,
        headerLeft: getHeaderCloseButton(ModalActionCreators.pop),
        headerTitle: () => null,
        render: () => <FamilyCenterModalCancelScreen otherUser={otherUser3} />
      }
    };
  }, [otherUser2])} headerBackTitle={intl.string(t["13/7kX"])} />;
};