import React, { useState } from 'react';
import { View, Alert, Modal } from 'react-native';
import { useRouter } from 'expo-router';
import { AppContainer, MyText, tw, useMarkDataFetchers, MyFlatList, MyTouchableOpacity } from 'common-ui';
import { trpc } from '@/src/trpc-client';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import AddressForm from '@/src/components/AddressForm';
interface Address {
id: number;
name: string;
phone: string;
addressLine1: string;
addressLine2: string | null;
city: string;
state: string;
pincode: string;
isDefault: boolean;
}
function AddressCard({ address, onEdit, onDelete, onSetDefault, isDeleting }: {
address: Address;
onEdit: (address: Address) => void;
onDelete: (id: number) => void;
onSetDefault: (id: number) => void;
isDeleting?: boolean;
}) {
const formatAddress = (addr: Address) => {
return `${addr.addressLine1}${addr.addressLine2 ? `, ${addr.addressLine2}` : ''}, ${addr.city}, ${addr.state} - ${addr.pincode}`;
};
return (
{address.name}
{address.isDefault && (
Default
)}
📞 {address.phone}
📍 {formatAddress(address)}
{!address.isDefault && (
onSetDefault(address.id)}
>
Set Default
)}
onEdit(address)}
>
Edit
onDelete(address.id)}
disabled={isDeleting}
>
{isDeleting ? 'Deleting...' : 'Delete'}
);
}
export default function Addresses() {
const [modalVisible, setModalVisible] = useState(false);
const [editingAddress, setEditingAddress] = useState(null);
const { data, isLoading, error, refetch } = trpc.user.address.getUserAddresses.useQuery();
useMarkDataFetchers(() => {
refetch();
});
const addresses = data?.data || [];
const updateAddressMutation = trpc.user.address.updateAddress.useMutation();
const deleteAddressMutation = trpc.user.address.deleteAddress.useMutation();
const handleAddAddress = () => {
setEditingAddress(null);
setModalVisible(true);
};
const handleEditAddress = (address: Address) => {
setEditingAddress(address);
setModalVisible(true);
};
const handleDeleteAddress = (id: number) => {
Alert.alert(
'Delete Address',
'Are you sure you want to delete this address?',
[
{ text: 'Cancel', style: 'cancel' },
{
text: 'Delete',
style: 'destructive',
onPress: () => {
deleteAddressMutation.mutate({ id }, {
onSuccess: () => {
refetch();
Alert.alert('Success', 'Address deleted successfully');
},
onError: (error) => {
Alert.alert('Error', error.message || 'Failed to delete address');
}
});
}
}
]
);
};
const handleSetDefault = (id: number) => {
// Update the address to be default
const addressToUpdate = addresses.find(addr => addr.id === id);
if (addressToUpdate) {
updateAddressMutation.mutate({
id: addressToUpdate.id,
name: addressToUpdate.name,
phone: addressToUpdate.phone,
addressLine1: addressToUpdate.addressLine1,
addressLine2: addressToUpdate.addressLine2 || undefined,
city: addressToUpdate.city,
state: addressToUpdate.state,
pincode: addressToUpdate.pincode,
isDefault: true,
}, {
onSuccess: () => {
refetch();
Alert.alert('Success', 'Default address updated');
},
onError: (error) => {
Alert.alert('Error', error.message || 'Failed to update default address');
}
});
}
};
const handleAddressSubmit = () => {
setModalVisible(false);
setEditingAddress(null);
refetch();
};
if (isLoading) {
return (
Loading addresses...
);
}
if (error) {
return (
Failed to load addresses. Please try again.
refetch()}
>
Retry
);
}
return (
<>
(
)}
keyExtractor={(item) => item.id.toString()}
ListHeaderComponent={() => (
My Addresses
)}
ListEmptyComponent={() => (
No addresses found
Add your first delivery address
Add Address
)}
contentContainerStyle={tw`p-4`}
showsVerticalScrollIndicator={false}
/>
setModalVisible(false)}
>
{editingAddress ? 'Edit Address' : 'Add Address'}
setModalVisible(false)}
style={tw`p-1`}
>
);
}