import React from "react";
import { StyleSheet, View } from "react-native";
import { radius, theme } from "../theme";

export type ProgressBarTone = "signal" | "neutral";

export type ProgressBarProps = {
  /** 0..1. Values outside the range are clamped. */
  progress: number;
  tone?: ProgressBarTone;
  testID?: string;
};

/** Territory download / verify / activate progress. */
export function ProgressBar({
  progress,
  tone = "signal",
  testID,
}: ProgressBarProps): React.JSX.Element {
  const clamped = Math.max(0, Math.min(1, progress));

  return (
    <View
      style={styles.track}
      testID={testID}
      accessibilityRole="progressbar"
      accessibilityValue={{ min: 0, max: 100, now: Math.round(clamped * 100) }}
    >
      <View
        style={[
          styles.fill,
          { width: `${clamped * 100}%` },
          tone === "signal" ? styles.signalFill : styles.neutralFill,
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  track: {
    height: 6,
    borderRadius: radius.pill,
    backgroundColor: theme.surfaceAlt,
    overflow: "hidden",
  },
  fill: {
    height: "100%",
    borderRadius: radius.pill,
  },
  signalFill: {
    backgroundColor: theme.signal,
  },
  neutralFill: {
    backgroundColor: theme.textSecondary,
  },
});
