// Metro module 9705 (f9706).
import { useEffect } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import BadgeDirectoryStore, { getSingleRequirementThreshold } from "../../../badges/BadgeDirectoryStore";
import { AnalyticEvents } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { BadgeId } from "../../../../_bundle/Module8106";
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl } from "../../../../intl/index.native";
import GiftingBadge_messages from "../GiftingBadge.messages";
import GiftingBadgeIcon from "./views/GiftingBadgeIcon";
const useStyles = createStyles({
  container: {
    alignItems: "center",
    paddingTop: Module712.space.PX_16,
    paddingHorizontal: Module712.space.PX_16
  },
  headerContainer: {
    paddingHorizontal: Module712.space.PX_8
  },
  title: {
    textAlign: "center",
    marginBottom: Module712.space.PX_8
  },
  description: {
    textAlign: "center",
    marginBottom: Module712.space.PX_16
  },
  tierCards: {
    flexDirection: "row",
    flexWrap: "wrap",
    rowGap: Module712.space.PX_8
  },
  tierCard: {
    width: "33.33%",
    alignItems: "center",
    padding: Module712.space.PX_8
  },
  iconWrapper: {
    paddingVertical: Module712.space.PX_8
  }
});
export default function GiftingBadgeInfoActionSheet() {
  let stateFromStores;
  const styles = useStyles();
  const bottom = useSafeAreaInsets_native().bottom;
  const stateFromStores2 = useStateFromStores([BadgeDirectoryStore], () => BadgeDirectoryStore.getBadgeById(BadgeId.GIFTING));
  stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  useEffect(() => {
    AnalyticsUtils.track(AnalyticEvents.GIFTING_BADGE_INFO_ACTION_SHEET_OPENED);
  }, []);
  const r80 = [<View style={styles.headerContainer}>
    <Text style={styles.title} variant="heading-xl/semibold" color="text-strong" accessibilityRole="header">
      {intl.string(GiftingBadge_messages["0MB2C6"])}
    </Text>
    <Text style={styles.description} variant="text-md/medium" color="text-default">
      {intl.string(GiftingBadge_messages.k9sNVH)}
    </Text>
  </View>, ,];
  const r2 = stateFromStores2 == null;
  let r83 = void 0;
  if (!r2) {
    const tiers = stateFromStores2.tiers;
    r83 = tiers == null ? void 0 : tiers.map((tier) => {
      let icon;
      if (stateFromStores) {
        let complex_icon_static_url = tier.complex_icon_static_url;
        if (complex_icon_static_url == null) {
          complex_icon_static_url = tier.simple_icon_url;
        }
        icon = complex_icon_static_url;
      } else {
        icon = tier.complex_icon_animated_url;
        if (icon == null) {
          icon = tier.complex_icon_static_url;
        }
        if (icon == null) {
          icon = tier.simple_icon_url;
        }
      }
      const singleRequirementThreshold = getSingleRequirementThreshold(tier);
      return <View key={tier.key} style={styles.tierCard}>
        {icon != null && <View style={styles.iconWrapper}>
          <GiftingBadgeIcon icon={icon} size={58} />
        </View>}
        <Text variant="text-lg/semibold" color="text-strong">{tier.name}</Text>
        {singleRequirementThreshold != null && <Text variant="text-md/normal" color="text-subtle">
          {intl.formatToPlainString(GiftingBadge_messages.qvx9E4, {
            count: singleRequirementThreshold
          })}
        </Text>}
      </View>;
    });
  }
  r80[1] = <View style={styles.tierCards}>{r83}</View>;
  return <BottomSheet scrollable={false} startExpanded>
    <View style={[styles.container, {
      paddingBottom: bottom + Module712.space.PX_16
    }]}>{r80}</View>
  </BottomSheet>;
};