import React, { useState } from "react";
import { Pressable, Text, View } from "react-native";
import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
import { usePalette } from "../utils/palette";
/**
 * Themed segmented control with a sliding indicator (reanimated). Mirrors the
 * website/simple-finance "Sign In / Sign Up" pill, but palette-driven so it
 * tracks the active theme instead of hard-coded brand colors. Shared by the
 * consolidated AuthScreen mode switch and the ConnectionSettings run-mode pills.
 *
 * Colors are applied via inline `style` (not className) on the Text so Android's
 * NativeWind doesn't override the active/inactive foreground — see the
 * android-nativewind-styling note.
 */
export function SegmentedToggle({ value, options, onChange, size = "default", className, }) {
    const { palette: p } = usePalette();
    const [trackW, setTrackW] = useState(0);
    const slide = useSharedValue(0);
    const count = options.length;
    const index = Math.max(0, options.findIndex((o) => o.key === value));
    const pad = 4;
    const segW = trackW > 0 ? (trackW - pad * 2) / count : 0;
    // Drive the indicator off the selected index whenever it changes.
    slide.value = withTiming(index * segW, { duration: 240, easing: Easing.out(Easing.cubic) });
    const indicatorStyle = useAnimatedStyle(() => ({
        width: segW,
        transform: [{ translateX: slide.value }],
    }));
    const vPad = size === "sm" ? 9 : 11;
    const fontSize = size === "sm" ? 14 : 15;
    return (<View className={className} style={{ backgroundColor: p.muted, borderRadius: 999, padding: pad }} onLayout={(e) => setTrackW(e.nativeEvent.layout.width)}>
      <View style={{ flexDirection: "row" }}>
        <Animated.View style={[
            {
                position: "absolute",
                top: 0,
                bottom: 0,
                borderRadius: 999,
                backgroundColor: p.primary,
            },
            indicatorStyle,
        ]}/>
        {options.map((opt) => {
            const active = opt.key === value;
            return (<Pressable key={opt.key} accessibilityRole="tab" accessibilityState={{ selected: active, disabled: !!opt.disabled }} disabled={opt.disabled} onPress={() => !opt.disabled && onChange(opt.key)} style={{
                    flex: 1,
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: opt.icon ? 7 : 0,
                    paddingVertical: vPad,
                    opacity: opt.disabled ? 0.45 : 1,
                }}>
              {opt.icon?.(active ? p.primaryForeground : p.mutedForeground)}
              <Text style={{
                    fontSize,
                    fontWeight: active ? "700" : "500",
                    color: active ? p.primaryForeground : p.mutedForeground,
                }}>
                {opt.label}
              </Text>
            </Pressable>);
        })}
      </View>
    </View>);
}
export default SegmentedToggle;
//# sourceMappingURL=segmented-toggle.jsx.map