import React from "react";
import { View } from "react-native";
import { MutedText } from "../../components/text";
export function calculatePasswordStrength(pass) {
    let strength;
    const hasLower = /[a-z]/.test(pass);
    const hasUpper = /[A-Z]/.test(pass);
    const hasNumber = /[0-9]/.test(pass);
    const hasSpecial = /[^A-Za-z0-9]/.test(pass);
    const complexityCount = [hasLower, hasUpper, hasNumber, hasSpecial].filter(Boolean).length;
    if (complexityCount >= 4) {
        strength = 60;
    }
    else if (complexityCount === 3) {
        strength = 40;
    }
    else if (complexityCount === 2) {
        strength = 20;
    }
    else {
        strength = 10;
    }
    if (pass.length >= 16) {
        strength += 40;
    }
    else if (pass.length >= 12) {
        strength += 20;
    }
    else if (pass.length >= 8) {
        strength += 10;
    }
    if (pass.length < 8) {
        strength = Math.min(strength, 25);
    }
    else if (pass.length < 12) {
        strength = Math.min(strength, 50);
    }
    else if (pass.length < 16) {
        strength = Math.min(strength, 75);
    }
    let color;
    let label;
    if (strength <= 25) {
        color = "#EF4444";
        label = "Weak";
    }
    else if (strength <= 50) {
        color = "#F59E0B";
        label = "Moderate";
    }
    else if (strength <= 75) {
        color = "#22C55E";
        label = "Strong";
    }
    else {
        color = "#10B981";
        label = "Very Strong";
    }
    return { strength: Math.min(strength, 100), color, label };
}
const PasswordStrengthMeter = React.memo(function PasswordStrengthMeter({ password, reserveSpace = false, }) {
    if (!password && !reserveSpace) {
        return null;
    }
    // Blank password in reserve mode: render the same tree fully transparent, so
    // the block holds its exact height without showing an empty gauge that reads
    // as broken. `label`/`strength` are placeholders that are never visible.
    const blank = !password;
    const { strength, color, label } = blank
        ? { strength: 0, color: "#333333", label: "Weak" }
        : calculatePasswordStrength(password);
    return (<View className="gap-2" style={blank ? { opacity: 0 } : undefined} pointerEvents={blank ? "none" : "auto"} accessibilityElementsHidden={blank} importantForAccessibility={blank ? "no-hide-descendants" : "auto"}>
      <View className="flex-row gap-1">
        {[0, 1, 2, 3, 4].map((i) => {
            const threshold = (i + 1) * 20;
            const filled = strength >= threshold;
            return (<View key={i} className="h-1 flex-1 rounded-full" style={{ backgroundColor: filled ? color : "#333333" }}/>);
        })}
      </View>
      <View className="flex-row items-center justify-between">
        <MutedText className="text-xs">{label}</MutedText>
        <MutedText className="text-xs">{strength}%</MutedText>
      </View>
    </View>);
});
export default PasswordStrengthMeter;
//# sourceMappingURL=PasswordStrengthMeter.jsx.map