// Metro module 11071 (f11072).
import { useMemo, useRef, useEffect } from "react";
import { ActivityIndicator, ScrollView, View } from "react-native";
import LocaleStore from "../../user_settings/LocaleStore";
import SafetyHubStore from "../SafetyHubStore";
import { SafetyHubAnalyticsActionSource, SafetyHubAnalyticsActions, SafetyHubLinks } from "../SafetyHubConstants";
import { AnalyticEvents } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { Text } from "../../../design/components/Text/native/Text";
import { MemberType, AppealEligibility, ClassificationRequestState } from "../SafetyHubModels";
import { intl, t } from "../../../intl/index.native";
import { useStateFromStores } from "../../../_bundle/Module589";
import TouchableHitBox from "../../../design/void/TouchableHitBox/native/TouchableHitBox";
import Linking from "../../../lib/native/Linking";
import { ShieldIcon } from "../../../design/components/Icon/native/redesign/generated/ShieldIcon";
import { Button } from "../../../design/components/Button/native/Button.native";
import { useSafetyHubClassification } from "../hooks/useSafetyHubClassifications";
import { useSafetyHubAccountStanding } from "../hooks/useSafetyHubAccountStanding";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import ClassificationEvidence from "./ClassificationEvidence";
import { getClassificationExpiration } from "../SafetyHubUtils";
import AutomatedUnderageAppealModalActionCreators_native from "../AutomatedUnderageAppealModalActionCreators.native";
import MonitoringAgent from "../../monitoring/MonitoringAgent";
import { MetricEvents } from "../../../_bundle/Module5872";
import AppealIngestionModalActionCreators from "./AppealIngestionModalActionCreators";
let useStyles, ClassificationActionsTaken, ClassificationActionsTakenRows, ClassificationGuidance, ClassificationPolicyCard, AppealStatus, LetUsKnow, AppealFooter, ClassificationDetailFooter;
const ClassificationHeader = function ClassificationHeader(props) {
  const { classificationTypeText, guildMetadata } = props;
  const styles2 = useStyles();
  return <View style={styles2.header}>
    <Text variant="text-lg/normal" style={styles2.headerText} color="mobile-text-heading-primary">
      {useMemo(() => {
        const r9 = {
          classification_type: classificationTypeText,
          classificationHook: (a0, a1) => <Text key={a1} variant="heading-xl/bold">
            {a0}
          </Text>
        };
        return guildMetadata != null ? guildMetadata?.member_type === MemberType.OWNER ? intl.format(t.X1ngSd, {
          ...r9,
          guildName: guildMetadata?.name
        }) : intl.format(t.rmpEPD, {
          ...r9,
          guildName: guildMetadata?.name
        }) : intl.format(t["39jfOz"], r9);
      }, [classificationTypeText, guildMetadata])}
    </Text>
  </View>;
};
ClassificationActionsTaken = function ClassificationActionsTaken(props) {
  let r31;
  L5: {
    const { actions, classificationExpiration } = props;
    const stateFromStores = useStateFromStores([LocaleStore], () => LocaleStore.locale);
    const styles2 = useStyles();
    const r12 = actions.filter((action) => action.descriptions.length > 0);
    if (r12.length === 0) {
      r31 = null;
      if (classificationExpiration == null) {
        break L5;
      }
    }
    r31 = <View style={styles2.sectionContainer}>
      <Text variant="eyebrow" color="text-muted">
        {intl.string(t["O2nYk+"])}
      </Text>
      <View style={[styles2.actionsTaken]}>
        {r12.map((item) => <ClassificationActionsTakenRows key={item.id} action={item} />)}
        {classificationExpiration != null ? <View key="expiration" style={styles2.classificationActionDescription}>
          <Text variant="text-xs/normal">
            {" "}
            •
          </Text>
          <Text variant="text-xs/normal">
            {intl.format(t.TByIjT, {
              expirationDate: classificationExpiration.toLocaleDateString(stateFromStores, {
                dateStyle: "medium"
              })
            })}
          </Text>
        </View> : null}
      </View>
    </View>;
  }
  return r31;
};
ClassificationActionsTakenRows = function ClassificationActionsTakenRows(props) {
  const action = props.action;
  const styles = useStyles();
  return <>
    {action.descriptions.map((description, index) => <View key={index} style={styles.classificationActionDescription}>
      <Text variant="text-xs/normal">
        {" "}
        •
      </Text>
      <Text variant="text-xs/normal">
        {description}
      </Text>
    </View>)}
  </>;
};
ClassificationGuidance = function ClassificationGuidance(props) {
  const { tosLink, communityGuidelinesLink, classificationTypeText: classificationTypeText2, policyExplainerLink: policyExplainerLink2, appealComponent } = props;
  return <View style={useStyles().sectionContainer}>
    <Text variant="eyebrow" color="text-muted">
      {intl.string(t["977iei"])}
    </Text>
    <Text variant="text-sm/normal">
      {intl.format(t["1Z/+aA"], {
        tosLink,
        communityGuidelinesLink
      })}
    </Text>
    <ClassificationPolicyCard classificationTypeText={classificationTypeText2} policyExplainerLink={policyExplainerLink2} />
    {appealComponent}
  </View>;
};
ClassificationPolicyCard = function ClassificationPolicyCard(props) {
  const { classificationTypeText: classificationTypeText2, policyExplainerLink } = props;
  const styles2 = useStyles();
  return <View>
    <TouchableHitBox onPress={function onPress() {
      Linking.openURL(policyExplainerLink);
    }} style={[styles2.classificationPolicyCard]}>
      <View style={styles2.classificationPolicyCardIcon}>
        <ShieldIcon size="sm" color={Module712.colors.TEXT_LINK} />
      </View>
      <View style={styles2.classificationPolicyCardContent}>
        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
          {intl.format(t.zxUdpj, {
            classificationDescription: classificationTypeText2
          })}
        </Text>
      </View>
    </TouchableHitBox>
  </View>;
};
AppealStatus = function AppealStatus() {
  return <Text variant="text-md/normal" color="text-muted">
    {intl.string(t["I2H0/E"])}
  </Text>;
};
LetUsKnow = function LetUsKnow(props) {
  let c18517_0 = props;
  return <Text variant="text-sm/normal" color="text-muted">
    {intl.format(t.IFxUaT, {
      letUsKnowHook: (a0, a1) => <Text key={a1} onPress={c18517_0.onPressLetUsKnow} variant="text-sm/normal" color="text-link">
        {a0}
      </Text>
    })}
  </Text>;
};
AppealFooter = function AppealFooter(props) {
  return <View style={useStyles().letUsKnowContainer}>
    {props.hasBeenAppealed ? <AppealStatus /> : <LetUsKnow onPressLetUsKnow={props.onPressLetUsKnow} />}
  </View>;
};
ClassificationDetailFooter = function ClassificationDetailFooter(props) {
  const onClose2 = props.onClose;
  return <View style={useStyles().redirectButtonWrapper}>
    <Button size="md" text={intl.string(t.elrEjL)} onPress={onClose2} grow />
  </View>;
};
useStyles = createStyles({
  root: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
  },
  container: {
    display: "flex",
    flexDirection: "column",
    height: "100%",
    paddingTop: Module712.space.PX_16,
    paddingHorizontal: Module712.space.PX_16,
    gap: Module712.space.PX_32
  },
  header: {
    display: "flex",
    textAlign: "center",
    alignItems: "center",
    flexDirection: "column",
    gap: Module712.space.PX_8,
    marginBottom: Module712.space.PX_8
  },
  headerText: {
    textAlign: "center",
    maxWidth: 260
  },
  sectionContainer: {
    display: "flex",
    gap: Module712.space.PX_8
  },
  actionsTaken: {
    display: "flex",
    paddingLeft: Module712.space.PX_4,
    flexDirection: "column",
    gap: Module712.space.PX_8
  },
  classificationDetailContainer: {
    display: "flex",
    flexDirection: "column",
    gap: Module712.space.PX_32
  },
  letUsKnowContainer: {
    display: "flex",
    alignItems: "center"
  },
  classificationPolicyCard: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    gap: Module712.space.PX_12,
    padding: Module712.space.PX_12,
    marginTop: Module712.space.PX_4,
    flexShrink: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
  },
  classificationPolicyCardIcon: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
    width: 32,
    height: 32,
    borderRadius: Module712.radii.xxl
  },
  classificationPolicyCardContent: {
    flex: 1
  },
  classificationActionDescription: {
    display: "flex",
    flexDirection: "row",
    gap: Module712.space.PX_8
  },
  redirectButtonWrapper: {
    width: 300,
    alignSelf: "center",
    marginTop: Module712.space.PX_32
  }
});
export default function ConnectedClassificationDetail(props) {
  let r123, r127;
  let is_violative_content_shown, safetyHubAccountStanding, c18518_8, c18518_9, current, ref;
  const { classificationId, source, onClose, onError } = props;
  const safetyHubClassification = useSafetyHubClassification(classificationId);
  const { classification, isAppealEligible } = safetyHubClassification;
  const styles2 = useStyles();
  const stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getAppealEligibility());
  is_violative_content_shown = classification?.flagged_content != null && (classification == null ? void 0 : classification.flagged_content.length) > 0;
  safetyHubAccountStanding = useSafetyHubAccountStanding();
  c18518_8 = !!classification?.is_coppa && stateFromStores.includes(AppealEligibility.AGE_VERIFY_ELIGIBLE);
  c18518_9 = !!classification?.is_coppa && stateFromStores.includes(AppealEligibility.AGE_VERIFY_GLOBAL_ELIGIBLE);
  current = {
    accountStanding: safetyHubAccountStanding,
    classificationId,
    classificationState: safetyHubClassification,
    hasFlaggedContent: is_violative_content_shown,
    source
  };
  ref = useRef(current);
  useEffect(() => {
    ref.current = current;
  });
  useEffect(() => {
    if (classification != null) {
      const current2 = ref.current;
      const { accountStanding, classificationId: classificationId2, classificationState, hasFlaggedContent } = current2;
      let source2 = current2.source;
      const SAFETY_HUB_ACTION = AnalyticEvents.SAFETY_HUB_ACTION;
      const r22 = {
        action: SafetyHubAnalyticsActions.ViewViolationDetail,
        account_standing: accountStanding.state,
        classification_ids: [Number(classificationId2)],
        source: null,
        is_violative_content_shown: null,
        is_dsa_eligible: null,
        violation_type: null
      };
      if (source2 == null) {
        source2 = SafetyHubAnalyticsActionSource.SystemDM;
      }
      r22.source = source2;
      r22.is_violative_content_shown = hasFlaggedContent;
      r22.is_dsa_eligible = classificationState.isDsaEligible;
      r22.violation_type = classificationState.violationType;
      AnalyticsUtils.track(SAFETY_HUB_ACTION, r22);
    }
  }, [classification]);
  if (classification == null && safetyHubClassification.classificationRequestState === ClassificationRequestState.FAILED) {
    onError();
    r127 = null;
  } else {
    if (classification == null) {
      r123 = <ActivityIndicator size="large" />;
    } else {
      const r91 = [<ClassificationHeader classificationTypeText={classification.description} guildMetadata={classification.guild_metadata} />, , , , ,];
      let flagged_content = classification.flagged_content;
      if (flagged_content == null) {
        flagged_content = [];
      }
      r91[1] = <ClassificationEvidence flaggedContent={flagged_content} />;
      r91[2] = <ClassificationActionsTaken actions={classification.actions} classificationExpiration={getClassificationExpiration(classification)} />;
      r91[3] = <ClassificationGuidance appealLink={SafetyHubLinks.APPEALS_LINK} communityGuidelinesLink={SafetyHubLinks.COMMUNITY_GUIDELINES} tosLink={SafetyHubLinks.TOS_LINK} classificationTypeText={classification.description} policyExplainerLink={classification.explainer_link} appealComponent={<AppealFooter hasBeenAppealed={classification.appeal_status != null} onPressLetUsKnow={function onPressLetUsKnow() {
        const SAFETY_HUB_ACTION = AnalyticEvents.SAFETY_HUB_ACTION;
        const r6 = {
          action: SafetyHubAnalyticsActions.ClickLetUsKnow,
          account_standing: safetyHubAccountStanding.state,
          classification_ids: [Number(classificationId)],
          source: null,
          is_violative_content_shown: null,
          is_dsa_eligible: null,
          violation_type: null
        };
        let source2 = source;
        if (source == null) {
          source2 = SafetyHubAnalyticsActionSource.SystemDM;
        }
        r6.source = source2;
        r6.is_violative_content_shown = is_violative_content_shown;
        r6.is_dsa_eligible = safetyHubClassification.isDsaEligible;
        r6.violation_type = safetyHubClassification.violationType;
        AnalyticsUtils.track(SAFETY_HUB_ACTION, r6);
        if (c18518_9) {
          AutomatedUnderageAppealModalActionCreators_native.openV2(classificationId, onClose);
        } else if (c18518_8) {
          AutomatedUnderageAppealModalActionCreators_native.open(classificationId, onClose);
        } else if (isAppealEligible) {
          MonitoringAgent.increment({
            name: MetricEvents.APPEAL_INGESTION_VIEW
          });
          AppealIngestionModalActionCreators.open({
            classificationId
          });
        } else {
          Linking.openURL(SafetyHubLinks.APPEALS_LINK);
        }
      }} />} />;
      r91[4] = <ClassificationDetailFooter onClose={onClose} />;
      r123 = <View style={[styles2.classificationDetailContainer]}>{r91}</View>;
    }
    r127 = <ScrollView style={styles2.root}>
      <SafeAreaPaddingView style={styles2.container} bottom>{r123}</SafeAreaPaddingView>
    </ScrollView>;
  }
  return r127;
};