// Metro module 13786 (f13787).
import { useMemo, useState, useEffect } from "react";
import { Pressable, View } from "react-native";
import SafetyHubStore from "../SafetyHubStore";
import { SafetyHubAnalyticsActionSource, SafetyHubAnalyticsActions } from "../SafetyHubConstants";
import { AnalyticEvents } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import TouchableHitBox from "../../../design/void/TouchableHitBox/native/TouchableHitBox";
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 { ChevronSmallUpIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallUpIcon";
import { ChevronSmallDownIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallDownIcon";
import { getClassificationRelativeIncidentTime } from "../SafetyHubUtils";
import SnowflakeUtils from "../../../utils/SnowflakeUtils";
import { useIsNewClassification } from "../hooks/useIsNewClassification";
import { MemberType } from "../SafetyHubModels";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { useSafetyHubAccountStanding } from "../hooks/useSafetyHubAccountStanding";
import { useStateFromStores } from "../../../_bundle/Module589";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { useActiveSafetyHubClassifications, useExpiredSafetyHubClassifications } from "../hooks/useSafetyHubClassifications";
let useStyles, EmptyActiveState, EmptyExpiredState, RelativeIncidentTime, NewBadge, ClassificationDetail, SafetyHubViolationsContainer;
const SafetyHubViolationsHeader = function SafetyHubViolationsHeader(props) {
  const { count, onClick: onClick2, opened, status } = props;
  const styles = useStyles();
  const r1 = status === "active";
  return <TouchableHitBox onPress={onClick2} style={[styles.header]}>
    <View style={[styles.iconBackground]}>
      <WarningIcon color={r1 ? Module712.colors.INTERACTIVE_TEXT_DEFAULT : Module712.colors.ICON_MUTED} size="xs" />
    </View>
    <View style={[styles.headerTextContainer]}>
      <Text variant="heading-sm/semibold">
        {r1 ? intl.formatToPlainString(t.IeV2oY, {
          count: count.toString()
        }) : intl.formatToPlainString(t.fZAHBT, {
          count: count.toString()
        })}
      </Text>
      <Text variant="text-xxs/normal" color="text-muted">
        {r1 ? intl.string(t.XJ2YVR) : intl.string(t.SzGV0g)}
      </Text>
    </View>
    {opened ? <ChevronSmallUpIcon size="md" style={[styles.chevron]} /> : <ChevronSmallDownIcon size="md" style={[styles.chevron]} />}
  </TouchableHitBox>;
};
EmptyActiveState = function EmptyActiveState() {
  return <View style={[useStyles().emptyState]}>
    <Text variant="heading-sm/extrabold">
      {intl.string(t.reLFaV)}
    </Text>
    <Text variant="text-xs/normal">
      {intl.string(t.ERdH1o)}
    </Text>
  </View>;
};
EmptyExpiredState = function EmptyExpiredState() {
  return <View style={[useStyles().emptyState]}>
    <Text variant="text-xs/normal">
      {intl.string(t.RV3AXf)}
    </Text>
  </View>;
};
RelativeIncidentTime = function RelativeIncidentTime(props) {
  const timestamp = props.timestamp;
  return <View style={useStyles().incidentDate}>
    <Text variant="text-xs/medium">
      {getClassificationRelativeIncidentTime(timestamp)}
    </Text>
  </View>;
};
NewBadge = function NewBadge() {
  const styles = useStyles();
  return <View style={[styles.incidentDate, styles.incidentDateNew]}>
    <Text variant="text-xs/medium" color="text-overlay-light" style={styles.newText}>
      {intl.string(t.QKMRC4)}
    </Text>
  </View>;
};
ClassificationDetail = function ClassificationDetail(props) {
  const classification = props.classification;
  const styles = useStyles();
  const { id, description, guild_metadata } = classification;
  const timestamp = SnowflakeUtils.extractTimestamp(id);
  const isNewClassification = useIsNewClassification(classification);
  return <View style={[styles.detailContainerOuter, isNewClassification ? styles.detailContainerOuterNew : null]}>
    <TouchableHitBox onPress={() => {
      ModalActionCreators.pushLazy(import("./ClassificationDetailModal"), {
        classificationId: id,
        source: SafetyHubAnalyticsActionSource.StandingTab
      });
    }}>
      <View style={[styles.detailContainerInner]}>
        {isNewClassification ? <NewBadge /> : <RelativeIncidentTime timestamp={timestamp} />}
        <Text variant="heading-md/normal">
          {useMemo(() => {
            const hook = function hook(a0, a1) {
              return <Text key={a1} variant="heading-md/extrabold">
                {a0}
              </Text>;
            };
            const r9 = {
              description,
              descriptionHook: hook
            };
            return guild_metadata != null ? guild_metadata?.member_type === MemberType.OWNER ? intl.format(t.Lb0HVv, {
              ...r9,
              guildName: guild_metadata?.name
            }) : intl.format(t.rmpEPD, {
              classification_type: description,
              classificationHook: hook,
              guildName: guild_metadata?.name
            }) : intl.format(t.QY4g5t, r9);
          }, [description, guild_metadata])}
        </Text>
      </View>
    </TouchableHitBox>
  </View>;
};
SafetyHubViolationsContainer = function SafetyHubViolationsContainer(props) {
  let memo, c20725_8;
  const { status, classifications } = props;
  memo = void 0;
  c20725_8 = void 0;
  const styles = useStyles();
  let [state3, setState] = useState(false);
  const state = state3;
  const [state2, setState2] = useState(3);
  const safetyHubAccountStanding = useSafetyHubAccountStanding();
  const stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getIsDsaEligible());
  memo = useMemo(() => classifications.slice(0, state2), [classifications, state2]);
  useEffect(() => {
    if (state) {
      AnalyticsUtils.track(AnalyticEvents.SAFETY_HUB_ACTION, {
        action: SafetyHubAnalyticsActions.ViewViolationsDropdown,
        account_standing: safetyHubAccountStanding.state,
        classification_ids: memo.map((item) => Number(item.id)),
        source: SafetyHubAnalyticsActionSource.StandingTab,
        is_violative_content_shown: false,
        is_dsa_eligible: stateFromStores
      });
    }
  }, [state, safetyHubAccountStanding.state, memo, stateFromStores]);
  const nextPageSize = classifications.length - memo.length > 3 ? 3 : classifications.length - memo.length;
  c20725_8 = nextPageSize;
  const r69 = [<SafetyHubViolationsHeader status={status} onClick={() => setState((prevState) => !prevState)} opened={state} count={classifications.length} />, ,];
  if (state) {
    state3 = <View>
      <View style={[styles.separator]} />
      {memo.length > 0 && memo.map((item) => <ClassificationDetail key={item.id} classification={item} />)}
      {memo.length < classifications.length && <>
        <View style={[styles.separator]} />
        <View style={[styles.moreButtonContainer]}>
          <Pressable style={[styles.moreButton]} onPress={() => setState2((prevState2) => prevState2 + c20725_8)}>
            <Text variant="heading-sm/semibold">
              {intl.format(t["9Ml56H"], {
                nextPageSize
              })}
            </Text>
          </Pressable>
        </View>
      </>}
      {memo.length === 0 && status === "active" && <EmptyActiveState />}
      {memo.length === 0 && status === "expired" && <EmptyExpiredState />}
    </View>;
  }
  r69[1] = state3;
  return <View style={[styles.container]}>{r69}</View>;
};
useStyles = createStyles({
  connectedContainer: {
    display: "flex",
    marginTop: Module712.space.PX_12,
    marginBottom: 36,
    gap: Module712.space.PX_12
  },
  container: {
    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
    borderRadius: Module712.radii.md,
    padding: Module712.space.PX_8,
    width: "100%"
  },
  header: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_16,
    width: "100%"
  },
  detailContainerOuter: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
    borderRadius: Module712.radii.md,
    padding: Module712.space.PX_12,
    marginTop: 10
  },
  detailContainerOuterNew: {
    borderColor: Module712.colors.CONTROL_PRIMARY_BACKGROUND_DEFAULT,
    borderWidth: 1,
    borderStyle: "solid"
  },
  detailContainerInner: {
    display: "flex",
    gap: Module712.space.PX_8
  },
  iconBackground: {
    display: "flex",
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    justifyContent: "center",
    alignItems: "center",
    padding: 6
  },
  chevron: {
    marginLeft: "auto"
  },
  incidentDate: {
    alignSelf: "flex-start",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    borderRadius: Module712.radii.md,
    paddingVertical: Module712.space.PX_4,
    paddingHorizontal: Module712.space.PX_8
  },
  incidentDateNew: {
    backgroundColor: Module712.colors.BACKGROUND_BRAND,
    color: Module712.colors.CONTROL_PRIMARY_TEXT_DEFAULT
  },
  newText: {
    textTransform: "capitalize"
  },
  emptyState: {
    display: "flex",
    alignItems: "center",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
    borderRadius: Module712.radii.md,
    gap: Module712.space.PX_8,
    marginTop: Module712.space.PX_8,
    paddingTop: Module712.space.PX_24,
    paddingBottom: Module712.space.PX_24
  },
  separator: {
    height: 1,
    width: "100%",
    backgroundColor: Module712.colors.BORDER_SUBTLE,
    marginTop: 10
  },
  moreButtonContainer: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  moreButton: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    borderBottomEndRadius: Module712.radii.xs,
    borderBottomStartRadius: Module712.radii.xs,
    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
    height: 29,
    width: 207
  },
  headerTextContainer: {
    flexShrink: 0,
    flexGrow: 1,
    gap: 2
  }
});
export default SafetyHubViolationsContainer;
export function ConnectedSafetyHubViolationsContainer() {
  const styles = useStyles();
  const activeSafetyHubClassifications = useActiveSafetyHubClassifications();
  const expiredSafetyHubClassifications = useExpiredSafetyHubClassifications();
  return activeSafetyHubClassifications.length === 0 ? expiredSafetyHubClassifications.length !== 0 ? <View style={[styles.connectedContainer]}>
    <SafetyHubViolationsContainer status="active" classifications={activeSafetyHubClassifications} />
    <SafetyHubViolationsContainer status="expired" classifications={expiredSafetyHubClassifications} />
  </View> : null : <View style={[styles.connectedContainer]}>
    <SafetyHubViolationsContainer status="active" classifications={activeSafetyHubClassifications} />
    <SafetyHubViolationsContainer status="expired" classifications={expiredSafetyHubClassifications} />
  </View>;
}