discord-decomp/modules/safety_hub/native/SafetyHubAccountStanding.tsx

// Metro module 13784 (f13785).
import { useState, useMemo } from "react";
import { View } from "react-native";
import UserStore from "../../../stores/UserStore";
import SafetyHubStore from "../SafetyHubStore";
import { SafetyHubLinks } from "../SafetyHubConstants";
import { AccountStandingState } from "../SafetyHubModels";
import SafetyHubAccountStandingSubwayMarker, { SUBWAY_MARKER_WIDTH } from "./SafetyHubAccountStandingSubwayMarker";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { t, intl } from "../../../intl/index.native";
import { CircleCheckIcon } from "../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
import { CircleErrorIcon } from "../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
import Module8346 from "../../../_bundle/Module8346";
import { CircleXIcon } from "../../../design/components/Icon/native/redesign/generated/CircleXIcon";
import Module8998 from "../../../_bundle/Module8998";
import { useStateFromStores } from "../../../_bundle/Module589";
import AvatarUtils from "../../../utils/AvatarUtils";
import Module8068 from "../../../_bundle/Module8068";
import { Avatar, AvatarSizes } from "../../../design/void/native";
import { Text } from "../../../design/components/Text/native/Text";
const r34 = {};
r34[AccountStandingState.ALL_GOOD] = {
  left: "0%"
};
r34[AccountStandingState.LIMITED] = {
  left: "25%",
  transform: [{
    translateX: -0.5 * SUBWAY_MARKER_WIDTH
  }]
};
r34[AccountStandingState.VERY_LIMITED] = {
  left: "50%",
  transform: [{
    translateX: -0.5 * SUBWAY_MARKER_WIDTH
  }]
};
r34[AccountStandingState.AT_RISK] = {
  left: "75%",
  transform: [{
    translateX: -0.5 * SUBWAY_MARKER_WIDTH
  }]
};
r34[AccountStandingState.SUSPENDED] = {
  left: "100%",
  transform: [{
    translateX: -SUBWAY_MARKER_WIDTH
  }]
};
let c9593_11 = r34;
const useStyles = createStyles({
  container: {
    display: "flex",
    flexDirection: "column",
    rowGap: 12,
    padding: 24,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
    borderRadius: Module712.radii.md
  },
  avatarBackground: {
    position: "relative",
    justifyContent: "center",
    alignItems: "center",
    padding: Module712.space.PX_4,
    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
    borderRadius: Module712.radii.round
  },
  good: {
    color: Module712.colors.STATUS_POSITIVE
  },
  limited: {
    color: Module712.colors.STATUS_WARNING
  },
  veryLimited: {
    color: "#FF7A00"
  },
  atRisk: {
    color: Module712.colors.ICON_FEEDBACK_CRITICAL
  },
  suspended: {
    color: Module712.colors.ICON_FEEDBACK_CRITICAL
  },
  body: {
    display: "flex",
    rowGap: 40,
    width: "100%"
  },
  bodyText: {
    rowGap: Module712.space.PX_8
  },
  health: {
    position: "relative",
    left: 0,
    right: 0,
    marginBottom: 18
  },
  line: {
    height: 3,
    width: "100%",
    position: "absolute",
    top: 8.5,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
  },
  subwayMarker: {
    position: "absolute"
  },
  icon: {
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  }
});
export default function SafetyHubAccountStanding() {
  let style;
  const accountStanding = SafetyHubStore.getAccountStanding();
  const [state, setState] = useState(0);
  const styles = useStyles();
  const memo = useMemo(() => {
    const r1 = {};
    r1[AccountStandingState.ALL_GOOD] = {
      title: t.uaKrRi,
      description: intl.format(t.pEdBD4, {
        termsOfService: SafetyHubLinks.TOS_LINK,
        communityGuidelines: SafetyHubLinks.COMMUNITY_GUIDELINES
      }),
      status: t["/Idfao"],
      style: styles.good,
      CustomIcon: CircleCheckIcon
    };
    r1[AccountStandingState.LIMITED] = {
      title: t.epkcmS,
      description: intl.string(t["774juc"]),
      status: t.umleq4,
      style: styles.limited,
      CustomIcon: CircleErrorIcon,
      iconSource: Module8346
    };
    r1[AccountStandingState.VERY_LIMITED] = {
      title: t.crzE2X,
      description: intl.string(t["T/Ufh9"]),
      status: t.WBtMHf,
      style: styles.veryLimited,
      CustomIcon: CircleErrorIcon,
      iconSource: Module8346
    };
    r1[AccountStandingState.AT_RISK] = {
      title: t.XRNVzO,
      description: intl.string(t["hbH+9S"]),
      status: t["7f+4Lg"],
      style: styles.atRisk,
      CustomIcon: CircleErrorIcon,
      iconSource: Module8346
    };
    r1[AccountStandingState.SUSPENDED] = {
      title: t.MExFkz,
      description: intl.string(t["2liUvt"]),
      status: t["0OONGB"],
      style: styles.suspended,
      CustomIcon: CircleXIcon,
      iconSource: Module8998
    };
    return r1;
  }, [styles]);
  const memo2 = useMemo(() => Object.entries(memo).map((item, a1) => {
    const [r34, r12] = item;
    const r13 = parseInt(r34);
    const length = Object.keys(memo).length;
    return <View key={a1} style={[styles.subwayMarker, c9593_11[r13]]}>
      <SafetyHubAccountStandingSubwayMarker key={a1} selectedIcon={<r12.CustomIcon style={{
        ...styles.icon,
        width: 20,
        height: 20
      }} color={r12.style.color} />} style={r12.style} status={r12.status} isSelected={r13 === accountStanding.state} index={a1} onLayout={(event) => {
        if (event.nativeEvent.layout.height > state) {
          setState(event.nativeEvent.layout.height);
        }
      }} size={20} numOptions={length} />
    </View>;
  }), [accountStanding, memo, state, styles]);
  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  const source = stateFromStores != null ? AvatarUtils.getUserAvatarSource(stateFromStores) : Module8068;
  const r50 = memo[accountStanding.state];
  const { title, description } = r50;
  style = r50.style;
  let r67 = stateFromStores?.username;
  if (r67 == null) {
    r67 = "";
  }
  return <View style={[styles.container]}>
    <View style={styles.avatarBackground}>
      <Avatar source={source} size={AvatarSizes.XXLARGE} aria-label={r67} />
    </View>
    <View style={styles.body}>
      <View style={styles.bodyText}>
        <Text variant="heading-lg/medium" color="text-default" style={{
          textAlign: "center"
        }}>
          {intl.format(title, {
            hook: (a0, a1) => <Text key={a1} style={style} variant="heading-lg/bold">
              {a0}
            </Text>
          })}
        </Text>
        <Text variant="text-sm/medium" color="text-muted" style={{
          textAlign: "center"
        }}>{description}</Text>
      </View>
      <View style={[styles.health, {
        height: state
      }]}>
        <View style={styles.line} />
        {memo2}
      </View>
    </View>
  </View>;
};