// Metro module 9826 (f9827).
import { View } from "react-native";
import { getSingleRequirementThreshold } from "../../../../badges/BadgeDirectoryStore";
import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../../_bundle/Module712";
import GiftingBadgeIcon from "./GiftingBadgeIcon";
import { Text } from "../../../../../design/components/Text/native/Text";
import { intl } from "../../../../../intl/index.native";
import GiftingBadge_messages from "../../GiftingBadge.messages";
let useStyles;
const GiftingBadgeProgressBar = function GiftingBadgeProgressBar(props) {
  const percent = props.percent;
  const styles = useStyles();
  return <View style={styles.progressBarTrack}>
    <View style={[styles.progressBarFill, {
      width: `${Math.min(Math.max(percent, 0), 100)}%`
    }]} />
  </View>;
};
useStyles = createStyles({
  container: {
    flexDirection: "row",
    alignItems: "center",
    padding: Module712.space.PX_16
  },
  content: {
    flex: 1,
    paddingHorizontal: Module712.space.PX_8,
    gap: Module712.space.PX_4
  },
  progressBarTrack: {
    height: 6,
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL,
    overflow: "hidden"
  },
  progressBarFill: {
    height: 6,
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_BRAND
  },
  labels: {
    flexDirection: "row",
    justifyContent: "flex-end",
    alignItems: "center",
    minHeight: Module712.space.PX_16
  }
});
export default function GiftingBadgeProgress(props) {
  const { progress, currentTier, nextTier, iconSize = 24, title } = props;
  const styles = useStyles();
  const singleRequirementThreshold = getSingleRequirementThreshold(nextTier);
  return <View style={styles.container}>
    {currentTier?.simple_icon_url != null && <GiftingBadgeIcon icon={currentTier.simple_icon_url} size={iconSize} />}
    <View style={styles.content}>
      {title != null && <Text variant="text-md/semibold">{title}</Text>}
      <GiftingBadgeProgressBar percent={nextTier != null && singleRequirementThreshold > 0 ? Math.min(Math.max(progress / singleRequirementThreshold * 100, 0), 100) : 100} />
      <View style={styles.labels}>
        {nextTier != null && <Text variant="text-xs/normal" color="text-muted">
          {intl.format(GiftingBadge_messages.iIpfQe, {
            count: progress,
            threshold: singleRequirementThreshold
          })}
        </Text>}
      </View>
    </View>
    {nextTier?.simple_icon_url != null && <GiftingBadgeIcon icon={nextTier.simple_icon_url} size={iconSize} />}
  </View>;
};