// Metro module 11085 (f11086).
import { useCallback, useEffect } from "react";
import { View } from "react-native";
import SafetyHubStore from "../SafetyHubStore";
import { AGE_APPEAL_ACTION_SHEET_NAME, SafetyHubLinks } from "../SafetyHubConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { intl, t } from "../../../intl/index.native";
import { useStateFromStores } from "../../../_bundle/Module589";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import AutomatedUnderageAppealModalActionCreators_native from "../AutomatedUnderageAppealModalActionCreators.native";
import AgeVerificationActionCreators_native from "../../age_assurance/AgeVerificationActionCreators.native";
import { AgeVerificationModalEntryPoint } from "../../age_assurance/AgeVerificationAnalyticsUtils";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { BottomSheetScrollView } from "../../../_bundle/Module5245";
import { Text } from "../../../design/components/Text/native/Text";
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import Linking from "../../../lib/native/Linking";
import { Button } from "../../../design/components/Button/native/Button.native";
import { requestSuspendedUserAgeVerification } from "../SafetyHubActionCreators";
const useStyles = createStyles({
  container: {
    flex: 1,
    paddingHorizontal: Module712.space.PX_16,
    paddingTop: Module712.space.PX_8
  },
  header: {
    alignItems: "center"
  },
  content: {
    flex: 1,
    gap: Module712.space.PX_16
  },
  moreInfo: {
    gap: Module712.space.PX_4
  },
  learnMore: {
    marginTop: Module712.space.PX_12,
    textAlign: "center",
    paddingBottom: Module712.space.PX_32
  },
  footer: {
    marginTop: Module712.space.PX_8
  },
  number: {
    alignItems: "center",
    justifyContent: "center",
    width: 32,
    height: 32,
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  }
});
let c7479_11 = [{
  title: intl.string(t["1+E7LP"]),
  description: intl.string(t["BXiat/"])
}, {
  title: intl.string(t.iMQXtK),
  description: intl.string(t.oQ0vwu)
}, {
  title: intl.string(t["oY/z1Q"]),
  description: intl.string(t.wtj02W)
}];
export default function AutomatedUnderageAppealActionSheet(props) {
  let callback, callback2;
  const { onClose, classificationId } = props;
  callback = void 0;
  callback2 = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getAgeVerificationWebviewUrl());
  const stateFromStores2 = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getIsLoadingAgeVerification());
  const bottom = useSafeAreaInsets_native().bottom;
  callback = useCallback(() => {
    if (onClose != null) {
      onClose();
    }
    AutomatedUnderageAppealModalActionCreators_native.close();
  }, [onClose]);
  callback2 = useCallback(() => {
    AutomatedUnderageAppealModalActionCreators_native.success();
    callback();
    AutomatedUnderageAppealModalActionCreators_native.start_verification_check();
  }, [callback]);
  useEffect(() => {
    if (stateFromStores !== "") {
      AgeVerificationActionCreators_native.showAgeVerification({
        webviewUrl: stateFromStores,
        onComplete: callback2,
        entryPoint: AgeVerificationModalEntryPoint.AUTOMATED_UNDERAGE_APPEALS
      });
      ActionSheetActionCreators.hideActionSheet(AGE_APPEAL_ACTION_SHEET_NAME);
    }
  }, [stateFromStores, callback2]);
  return <BottomSheet scrollable startHeight={425 + bottom + Module712.space.PX_16 + Module712.space.PX_32}>
    <BottomSheetScrollView style={styles.container}>
      <View style={{
        ...styles.content,
        paddingBottom: bottom
      }}>
        <View style={styles.header}>
          <Text variant="heading-xl/bold" color="mobile-text-heading-primary">
            {intl.string(t["9SDLnj"])}
          </Text>
          <Text variant="heading-md/medium" color="text-default">
            {intl.string(t["yvx//1"])}
          </Text>
        </View>
        <View>
          <TableRowGroup hasIcons>
            {c7479_11.map((item, index) => <TableRow key={index} label={item.title} subLabel={item.description} icon={<View style={styles.number}>
              <Text variant="heading-md/semibold" color="text-brand">
                {index + 1}
              </Text>
            </View>} />)}
          </TableRowGroup>
        </View>
        <View style={styles.moreInfo}>
          <TableRowGroup title={intl.string(t.WPwp1b)} hasIcons={false}>
            <TableRow label={intl.string(t.N9WJMM)} subLabel={intl.string(t.NHq382)} onPress={function onPress() {
              return Linking.openURL(SafetyHubLinks.AGE_VERIFICATION_LINK);
            }} arrow start end />
          </TableRowGroup>
        </View>
        <View style={styles.footer}>
          <Button onPress={() => requestSuspendedUserAgeVerification(classificationId)} loading={stateFromStores2} disabled={stateFromStores2} text={intl.string(t["54b8V0"])} />
          <Text variant="heading-sm/medium" color="text-subtle" style={styles.learnMore}>
            {intl.format(t.ZbWsOF, {
              learnMoreLink: SafetyHubLinks.LEARN_MORE_UU_APPEAL_LINK
            })}
          </Text>
        </View>
      </View>
    </BottomSheetScrollView>
  </BottomSheet>;
};