wishlist

components/ProductCard.tsx

@@ -1,28 +1,32 @@
 import React, { useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Image, ActivityIndicator } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Image, ActivityIndicator, Alert } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { ProductResponse } from '../services/product';
 import { useRouter } from 'expo-router';
 import { useCart } from '../hooks/useCart';
+import { wishlistApi } from '../services/wishlistApi ';
 
 interface ProductCardProps {
   product: ProductResponse;
+  onWishlistToggle?: (isAdded: boolean) => void;
 }
 
-const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
+const ProductCard: React.FC<ProductCardProps> = ({ product, onWishlistToggle }) => {
   const router = useRouter();
   const { addToCart } = useCart();
   const [isAdding, setIsAdding] = useState(false);
+  const [isInWishlist, setIsInWishlist] = useState(false);
+  const [isLoadingWishlist, setIsLoadingWishlist] = useState(false);
 
   const handlePress = () => {
     router.push(`/products/${product.productId}`);
   };
 
   const handleAddToCart = async (e: any) => {
-    e.stopPropagation(); // Ngăn chặn việc navigate khi click vào nút giỏ hàng
+    e.stopPropagation();
     
     if (product.stockQuantity <= 0) {
-      return; // Không cho thêm vào giỏ nếu hết hàng
+      return;
     }
 
     setIsAdding(true);
@@ -33,6 +37,37 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
     }
   };
 
+  const handleToggleWishlist = async (e: any) => {
+    e.stopPropagation();
+    setIsLoadingWishlist(true);
+    
+    try {
+      if (isInWishlist) {
+        const response = await wishlistApi.removeFromWishlist(product.productId);
+        if (response.success) {
+          setIsInWishlist(false);
+          onWishlistToggle?.(false);
+          Alert.alert('Thành công', response.message);
+        } else {
+          Alert.alert('Lỗi', response.message);
+        }
+      } else {
+        const response = await wishlistApi.addToWishlist(product.productId);
+        if (response.success) {
+          setIsInWishlist(true);
+          onWishlistToggle?.(true);
+          Alert.alert('Thành công', response.message);
+        } else {
+          Alert.alert('Lỗi', response.message);
+        }
+      }
+    } catch (error) {
+      Alert.alert('Lỗi', error instanceof Error ? error.message : 'Lỗi không xác định');
+    } finally {
+      setIsLoadingWishlist(false);
+    }
+  };
+
   const formatPrice = (price: number) => {
     return new Intl.NumberFormat('vi-VN', {
       style: 'currency',
@@ -54,6 +89,26 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
           <Text style={styles.categoryText}>{product.categoryName}</Text>
         </View>
 
+        {/* Wishlist Button */}
+        <TouchableOpacity
+          style={[
+            styles.wishlistButton,
+            isInWishlist && styles.wishlistButtonActive,
+          ]}
+          onPress={handleToggleWishlist}
+          disabled={isLoadingWishlist}
+        >
+          {isLoadingWishlist ? (
+            <ActivityIndicator size="small" color={isInWishlist ? '#ff6b6b' : '#fff'} />
+          ) : (
+            <Ionicons
+              name={isInWishlist ? 'heart' : 'heart-outline'}
+              size={20}
+              color={isInWishlist ? '#ff6b6b' : '#fff'}
+            />
+          )}
+        </TouchableOpacity>
+
         {/* Out of Stock Overlay */}
         {product.stockQuantity <= 0 && (
           <View style={styles.outOfStockOverlay}>
@@ -138,6 +193,20 @@ const styles = StyleSheet.create({
     color: '#fff',
     fontWeight: '600',
   },
+  wishlistButton: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wishlistButtonActive: {
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  },
   outOfStockOverlay: {
     position: 'absolute',
     top: 0,