// Metro module 12015 (f12016).
import { View } from "react-native";
import { Fonts } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import MobileVisualRefreshExperiment from "../../themes/experiments/MobileVisualRefreshExperiment";
import useActivityTimer, { formatTime } from "../hooks/useActivityTimer";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  bar: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
    borderRadius: Module712.radii.xs,
    height: 4,
    marginBottom: 4
  },
  progress: {
    backgroundColor: Module712.colors.ACTIVITY_TIMEBAR_PROGRESS_BACKGROUND,
    borderRadius: Module712.radii.xs,
    height: "100%",
    minWidth: 4
  },
  textRow: {
    flexDirection: "row",
    justifyContent: "space-between"
  }
});
export default function UserProfileActivityTimebar(props) {
  const { start, end, style } = props;
  const r15 = MobileVisualRefreshExperiment("UserProfileActivityTimebar");
  const styles = useStyles();
  const activityTimer = useActivityTimer({
    start,
    end
  });
  const { elapsed, duration, percentage } = activityTimer;
  const style2 = r15 ? void 0 : {
    fontFamily: Fonts.CODE_NORMAL
  };
  return <View style={style}>
    <View style={styles.bar}>
      <View style={[styles.progress, {
        width: 100 * percentage + "%"
      }]} />
    </View>
    <View style={styles.textRow}>
      <Text variant="text-xs/normal" style={style2} tabularNumbers={r15 ? r15 : void 0} color={r15 ? "text-subtle" : void 0}>
        {formatTime(elapsed)}
      </Text>
      <Text variant="text-xs/normal" style={style2} tabularNumbers={r15 || void 0} color={r15 ? "text-subtle" : void 0}>
        {formatTime(duration)}
      </Text>
    </View>
  </View>;
};