import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, Alert } from 'react-native';
import { SwipeListView } from 'react-native-swipe-list-view'; // Swipeable list için kütüphane
import { useNavigation } from '@react-navigation/native'; // Navigasyon işlemleri için kütüphane
import { useCart } from '../context/CartContext';
import { useAuth } from '../components/AuthContext';

const CartScreen = ({ route }) => {
  const { productId, productToAdd } = route.params || {}; // route objesinden productId ve productToAdd parametrelerini al
  const [cartItems, setCartItems] = useState([]); // Sepetteki ürünleri tutan state
  const [showOrderButton, setShowOrderButton] = useState(true); // Ön sipariş ver butonunu gösterme durumu
  const navigation = useNavigation(); // Navigation hook'u
  const { cart, removeItem: removeFromCart, addItem } = useCart()
  const { getUserId } = useAuth();

  useEffect(() => {
    setCartItems(cart)
    console.log('useEffect (cartItems):', cartItems); 
  }, [cart])

  // Component yüklendiğinde veya productId, productToAdd veya cartItems değiştiğinde çalışan useEffect
  useEffect(() => {
    if (productId && productToAdd) { // Eğer productId ve productToAdd varsa
      const existingProduct = cartItems.find(item => item.id === productId); // Sepetteki ürünler arasında productId'ye sahip olanı bul

      if (existingProduct) { // Eğer productId'ye sahip bir ürün bulunduysa
        const updatedCartItems = cartItems.map(item =>
          item.id === productId ? { ...item, quantity: item.quantity + 1 } : item // Ürünün miktarını bir arttır
        );
        setCartItems(updatedCartItems); // Güncellenmiş sepeti ayarla
      } else {
        setCartItems(prevCartItems => [...prevCartItems, { ...productToAdd, quantity: 1 }]); // Yeni ürünü sepete ekle
      }
      setShowOrderButton(true); // Ön sipariş ver butonunu göster
    }
  }, [productId, productToAdd, cartItems]); // useEffect'i sadece bu üç değişken değiştiğinde çalışacak şekilde ayarla

  // Ürün miktarını arttıran fonksiyon
  const increaseQuantity = (itemId) => {
    const updatedCartItems = cartItems.map(item =>
      item.id === itemId ? { ...item, quantity: item.quantity + 1 } : item // Seçilen ürünün miktarını bir arttır
    );
    setCartItems(updatedCartItems); // Güncellenmiş sepeti ayarla
  };

  // Ürün miktarını azaltan fonksiyon
  const decreaseQuantity = (itemId) => {
    const updatedCartItems = cartItems.map(item =>
      item.id === itemId && item.quantity > 1 ? { ...item, quantity: item.quantity - 1 } : item // Seçilen ürünün miktarını bir azalt
    );
    setCartItems(updatedCartItems); // Güncellenmiş sepeti ayarla
  };

  // Ürünü sepetten kaldıran fonksiyon
  const removeItem = (itemId) => {
    removeFromCart(itemId)
    // const updatedCartItems = cartItems.filter(item => item.id !== itemId); // Seçilen ürünü sepetten kaldır
    // setCartItems(updatedCartItems); // Güncellenmiş sepeti ayarla
  };

  // Swipe edildiğinde gösterilecek öğe
  const renderHiddenItem = (data, rowMap) => (
    <View style={styles.hiddenItem}>
      <TouchableOpacity
        style={[styles.deleteButtonContainer, styles.deleteButtonRight]}
        onPress={() => removeItem(data.item)}
      >
        <Text style={styles.deleteButtonText}>Sil</Text>
      </TouchableOpacity>
    </View>
  );

  // Ürünleri listeleyen fonksiyon
  const renderItem = ({ item }) => (
    <View style={styles.itemContainer}>
      <View style={styles.tableRow}>
        <Text style={styles.tableCell}>{item.product.urun_adi}</Text>
        <View style={styles.quantityContainer}>
          <TouchableOpacity onPress={() => removeItem(item)} style={styles.quantityButton}>
            <Text style={styles.quantityButtonText}>-</Text>
          </TouchableOpacity>
          <Text style={styles.quantity}>{item.qty}</Text>
          <TouchableOpacity onPress={() => addItem(item.product)} style={styles.quantityButton}>
            <Text style={styles.quantityButtonText}>+</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );

  // Ön sipariş ver butonuna basıldığında yapılacak işlem
  const handleOrderPress = async () => {
    try {
      // Sepet kontrolü
      if (!cartItems.length) {
        console.log('Sepetinizde ürün bulunmamaktadır.');
        return;
      }
  
      // Sipariş detaylarını topla
      const orderDetails = {
        cartItemIds: cartItems.map(item => item.id), // Sepetteki ürünlerin sadece ID'lerini içeren bir dizi
        userId: await getUserIdFromAuthContext(),
        // ... diğer sipariş detayları ekleyin (örn., iletişim bilgileri, teslimat adresi)
      };
  
      // Sabitler
      const API_ENDPOINT = 'https://bego-api.testmagna.com/api/contact';
      const METHOD = 'POST';
      const CONTENT_TYPE = 'application/json';
  
      // Kullanıcı onayı
      const confirmOrder = await Alert.alert(
        'Siparişi Onaylayın',
        'Sepetinizdeki ürünleri sipariş vermek istediğinizden emin misiniz?',
        [
          { text: 'İptal', onPress: () => {}, style: 'cancel' },
          {
            text: 'Onayla',
            onPress: async () => {
              const response = await fetch(API_ENDPOINT, {
                method: METHOD,
                headers: {
                  'Content-Type': CONTENT_TYPE,
                },
                body: JSON.stringify(orderDetails),
              });
  
              if (response.ok) {
                console.log('Sipariş başarıyla alındı.');
                Alert.alert('Sipariş Başarılı', 'Siparişiniz başarıyla oluşturuldu.');
                navigation.navigate('Order', { cartItems });
              } else {
                console.log('Sipariş verilirken bir hata oluştu.');
                const errorText = await response.text();
                Alert.alert('Hata', `Sipariş verilemedi: ${errorText}`);
                console.log(errorText);
              }
            },
          },
        ],
      );
  
      if (!confirmOrder) {
        return;
      }
    } catch (error) {
      console.error('Sipariş verilirken bir hata oluştu:', error);
      Alert.alert('Hata', 'Sipariş verilemedi. Lütfen tekrar deneyiniz.');
    }
  };
  
  
  // Kullanıcı kimliğini alma fonksiyonu
  async function getUserIdFromAuthContext() {
    try {
      const userId = await getUserId();
      console.log('Kullanıcı kimliği başarıyla alındı:', userId);
      if (userId) {
        return userId;
      } else {
        return userId; 
      }
    } catch (error) {
      console.error('Kullanıcı kimliği alınamadı:', error);
      return null;
    }
  }


  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Image source={require('../../assets/icons/arrow.png')} style={styles.backButton} />
        </TouchableOpacity>
        <View>
          <Text style={styles.headerText}>Sepetiniz</Text>
          <Text style={styles.headerText}>{cartItems.length} Ürün</Text>
        </View>
        <Image source={require('../../assets/icons/ico-cart.png')} style={styles.cartIcon} />
      </View>

      {cartItems.length === 0 ? (
        <Text style={styles.emptyCartMessage}>Sepetiniz boş.</Text>
      ) : (
        <>
          <SwipeListView
            data={cartItems}
            keyExtractor={(item) => item.id.toString()}
            renderItem={renderItem}
            renderHiddenItem={renderHiddenItem}
            rightOpenValue={-75}
            disableRightSwipe
          />
          {showOrderButton && (
            <View style={styles.orderContainer}>
              <TouchableOpacity style={styles.orderButton} onPress={handleOrderPress}>
                <Text style={styles.orderButtonText}>Ön Sipariş Ver</Text>
              </TouchableOpacity>
            </View>
          )}
        </>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 0,
    backgroundColor: 'white',
  },
  backButton: {
    width: 30,
    height: 30,
    marginRight: 10,
    marginTop: 20,
    marginBottom: 20
  },
  header: {
    backgroundColor: 'white',
    paddingVertical: 40,
    paddingHorizontal: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start'
  },
  headerText: {
    color: 'black',
    fontSize: 18,
    fontWeight: '400',
  },
  cartIcon: {
    width: 30,
    height: 30,
    marginRight: 10,
    marginHorizontal: 200
  },
  itemContainer: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginBottom: 10,
    borderRadius: 10,
    backgroundColor: 'white',
  },
  tableRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
  },
  tableCell: {
    flex: 1,
    fontSize: 16,
  },
  quantityContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  quantityButton: {
    backgroundColor: '#DDA726',
    paddingBottom: 10,
    paddingTop: 10,
    paddingLeft: 20,
    paddingRight: 20,
    borderRadius: 50,
    marginHorizontal: 10,
  },
  quantityButtonText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
  quantity: {
    fontSize: 18,
  },
  deleteButtonContainer: {
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
    width: 85,
    height: '90%',
    borderRadius: 10,
  },
  deleteButtonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  emptyCartMessage: {
    fontSize: 18,
    textAlign: 'center',
    marginTop: 50,
  },
  deleteButtonRight: {
    right: 0,
  },
  hiddenItem: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  orderContainer: {
    backgroundColor: 'grey',
    paddingVertical: 40,
    paddingHorizontal: 50,
    borderTopLeftRadius: 32,
    borderTopRightRadius: 32,
  },
  orderButton: {
    backgroundColor: 'white',
    paddingVertical: 20,
    alignItems: 'center',
    borderRadius: 32,
  },
  orderButtonText: {
    color: '#7A7A7A',
    fontWeight: 'bold',
    fontSize: 18,
  },
});

export default CartScreen;