import React from "react";
import { Pressable, ScrollView } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import { useColorScheme } from "nativewind";
import { MutedText, Text } from "../../components/text";
import { Button } from "../../components/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../components/card";
import { withClickTracking } from "../../services/telemetry";
/**
 * "Choose an account" screen for multi-session SSO (OIDC `prompt=select_account`
 * style). Presentational: the host app supplies the accounts and handles the
 * selection (resume the authorize request) / "use another" (login) navigation.
 */
export function AccountPickerScreen({ accounts, onSelect, onUseAnother, isLoading, }) {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    return (<SafeAreaView className="flex-1 bg-background dark:bg-black">
      <StatusBar style={isDark ? "light" : "dark"}/>
      <ScrollView className="flex-1" contentContainerClassName="flex-1 items-center justify-center p-6" keyboardShouldPersistTaps="handled">
        <Card className="w-full max-w-[400px]">
          <CardHeader>
            <CardTitle>Choose an account</CardTitle>
            <CardDescription>
              Select an account to continue, or use a different one.
            </CardDescription>
          </CardHeader>

          <CardContent className="gap-2">
            {accounts.length === 0 ? (<MutedText className="text-sm">No signed-in accounts.</MutedText>) : (accounts.map((a) => (<Pressable key={a.userId} onPress={withClickTracking("auth.account_picker.on_select", () => onSelect(a))} disabled={isLoading} accessibilityRole="button" accessibilityLabel={`Continue as ${a.username}`} className="rounded-md border border-border px-3 py-3">
                  <Text className="text-sm text-foreground">{a.displayName || a.username}</Text>
                  <MutedText className="text-xs">{a.email}</MutedText>
                </Pressable>)))}
          </CardContent>

          <CardFooter className="border-t-0">
            <Button className="w-full" variant="outline" telemetryId="auth.account_picker.use_another" onPress={onUseAnother} accessibilityLabel="Use another account" accessibilityRole="button">
              Use another account
            </Button>
          </CardFooter>
        </Card>
      </ScrollView>
    </SafeAreaView>);
}
export default AccountPickerScreen;
//# sourceMappingURL=AccountPickerScreen.jsx.map