import { View, Text } from "react-native";
import { useState, useEffect, use } from "react";
import { FlatList, RefreshControl } from "react-native";
import { listOrders } from "@/api/order";
import { Box } from "@/components/ui/box";
import { VStack } from "@/components/ui/vstack";
import { HStack } from "@/components/ui/hstack";

export default function UserOrders() {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const fetchOrders = async () => {
      try {
        const data = await listOrders();
        setOrders(data);
      } catch (err) {}
    };
    fetchOrders();
  }, []);

  if (orders.length === 0) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Brak zamówień</Text>
      </View>
    );
  }

  return (
    <FlatList
      className="m-2"
      data={orders}
      renderItem={({ item }) => (
        <Box className="p-4 rounded-md bg-white mb-2">
          <VStack>
            <HStack>
              <Text>{item.orderId}</Text>
              <Text className="ml-2">{item.orderType}</Text>
            </HStack>
            <Text className="mt-2">{item.status}</Text>
            <Text className="mt-2">Cena: {item.amount} zł</Text>
            <Text className="mt-2">{item.createdAt}</Text>
          </VStack>
        </Box>
      )}
    />
  );
}