import { authClient } from '@/lib/auth-client';
import {  RefreshControl, ScrollView, StatusBar, Text, View } from 'react-native';
import { useQuery, useZero } from "@rocicorp/zero/react";
import { queries, type Mutators, type Schema } from '@money/shared';
import { useState } from 'react';

export default function HomeScreen() {
  const { data: session } = authClient.useSession();

  const [balances] = useQuery(queries.getBalances(session));
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = async () => {
    setRefreshing(true);
    // simulate async work
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setRefreshing(false);
  };

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <ScrollView contentContainerStyle={{ paddingTop: StatusBar.currentHeight, flexGrow: 1 }} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} style={{ paddingHorizontal: 10 }}>
        {balances.map(balance => <Balance key={balance.id} balance={balance} />)}
      </ScrollView>
    </>
  );
}

function Balance({ balance }: { balance: { name: string, current: number, avaliable: number } }) {
  return <View style={{ backgroundColor: "#eee", borderColor: "#ddd", borderWidth: 1, marginBottom: 10, borderRadius: 10 }}>
    <Text style={{ fontSize: 15, textAlign: "center" }}>{balance.name}</Text>
    <Text style={{ fontSize: 30, textAlign: "center" }}>{balance.current}</Text>
  </View>
}