// Metro module 9827 (f9828).
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";
const useStyles = createStyles({
  container: {
    gap: Module712.space.PX_4,
    width: "100%"
  },
  barRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8
  },
  progressBarTrack: {
    flex: 1,
    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"
  }
});
export default function GiftingBadgeLevelUpProgress(props) {
  const { progress, currentTier, newTier, style } = props;
  const styles = useStyles();
  const singleRequirementThreshold = getSingleRequirementThreshold(newTier);
  return <View style={[styles.container, style]}>
    <View style={styles.barRow}>
      {currentTier?.simple_icon_url != null && <GiftingBadgeIcon icon={currentTier.simple_icon_url} size={24} />}
      <View style={styles.progressBarTrack}>
        <View style={[styles.progressBarFill, {
          width: `${singleRequirementThreshold > 0 ? Math.min(Math.max(progress / singleRequirementThreshold * 100, 0), 100) : 100}%`
        }]} />
      </View>
      {newTier.simple_icon_url != null && <GiftingBadgeIcon icon={newTier.simple_icon_url} size={24} />}
    </View>
    <View style={styles.labels}>
      <Text variant="text-xs/normal" color="text-muted">
        {intl.format(GiftingBadge_messages.iIpfQe, {
          count: progress,
          threshold: singleRequirementThreshold
        })}
      </Text>
    </View>
  </View>;
};