// Metro module 12161 (f12162).
import { Image as Image2, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { ResolvedValueType, resolveSingleStringOrSkeleton, resolveProgressPercentage, decimalToClampedPercentage } from "../../../_bundle/Module12070";
import { ImageSkeleton, TextSkeleton } from "../../user_profile/native/UserProfileApplicationWidgetSkeletons";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  root: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_12
  },
  image: {
    width: 48,
    height: 48,
    borderRadius: Module712.radii.sm,
    overflow: "hidden",
    borderWidth: 1,
    borderColor: Module712.colors.BORDER_SUBTLE,
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  content: {
    flex: 1,
    gap: Module712.space.PX_4,
    minWidth: 0
  },
  progressContainer: {
    width: "100%",
    height: 6,
    borderRadius: Module712.radii.md,
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  progress: {
    height: 6,
    borderRadius: Module712.radii.md,
    backgroundColor: Module712.colors.ICON_STRONG
  },
  textContent: {
    flexDirection: "row",
    justifyContent: "space-between",
    gap: Module712.space.PX_4
  },
  textLeft: {
    flex: 1,
    minWidth: 0
  },
  progressText: {
    flexShrink: 0
  }
});
export default function UserProfileApplicationWidgetBottomProgressLayout(props) {
  const { bottomConfig, resolveFieldValue } = props;
  const styles = useStyles();
  const objective = bottomConfig.components.objective;
  const r12 = resolveFieldValue(objective == null ? void 0 : objective.fields.image, [ResolvedValueType.MEDIA]);
  const r26 = resolveSingleStringOrSkeleton(objective, "name", resolveFieldValue);
  const r25 = resolveSingleStringOrSkeleton(objective, "description", resolveFieldValue);
  const progress = bottomConfig.components.progress;
  const r19 = resolveFieldValue(progress == null ? void 0 : progress.fields.current, [ResolvedValueType.NUMBER]);
  const r18 = resolveFieldValue(progress == null ? void 0 : progress.fields.max, [ResolvedValueType.NUMBER]);
  const r14 = resolveProgressPercentage(r19, r18);
  const r81 = [r12 != null ? <Image2 source={{
    uri: r12.media.url
  }} style={styles.image} resizeMode="contain" /> : <ImageSkeleton style={styles.image} />, ,];
  let max = r18?.value;
  if (max == null) {
    max = 1;
  }
  let now = r19?.value;
  if (now == null) {
    now = 0;
  }
  const r99 = [<View style={styles.progressContainer} accessibilityRole="progressbar" accessibilityValue={{
    min: 0,
    max,
    now
  }}>
    <View style={[styles.progress, {
      width: `${r14}%`
    }]} />
  </View>, <View style={styles.textContent}>
    <View style={styles.textLeft}>
      {r26.status === "value" ? <Text variant="heading-sm/medium" lineClamp={2}>{r26.text}</Text> : <TextSkeleton variant="heading-sm/medium" />}
      {r25.status === "value" ? <Text variant="text-xs/medium" color="text-subtle" lineClamp={2}>{r25.text}</Text> : <TextSkeleton variant="text-xs/medium" />}
    </View>
    {r19 != null ? <Text variant="text-sm/medium" lineClamp={1} style={styles.progressText}>
      {r18 != null ? `${r19.value}/${r18.value}` : `${decimalToClampedPercentage(r19.value)}%`}
    </Text> : <TextSkeleton variant="text-sm/medium" widthChars={4} />}
  </View>];
  r81[1] = <View style={styles.content}>{r99}</View>;
  return <View style={styles.root}>{r81}</View>;
};