import { View, Text, ScrollView, Image, Pressable} from 'react-native'
import React from 'react'
import { useStore } from '../store/store';
import PaymentFooter from '../components/PaymentFooter';
import CartItem from '../components/CartItem';





const Cart = ({navigation, route}: any) => {
  const CartList = useStore((state: any) => state.CartList); 
  const CartPrice = useStore((state: any) => state.CartPrice); 
  const addCartItemQuantity = useStore((state: any) => state.addCartItemQuantity);
  const removeCartItemQuantity = useStore((state: any) => state.removeCartItemQuantity);
  const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
  //console.log("CartList =", CartList.length)

  const buttonPressHandler = () => {
    navigation.push('payment', {amount: CartPrice});
  }
  //add to cart functionality
  const addCartItemQuantityHandler = (id: string, size: string) => {
    addCartItemQuantity(id, size);
    calculateCartPrice();
  };
  //remove from cart functionality
  const removeCartItemQuantityHandler = (id: string, size: string) => {
    removeCartItemQuantity(id, size);
    calculateCartPrice();
  };


  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
        <View style={{flex: 1, justifyContent: 'space-between'}}>
          <View style={{marginTop: 20, paddingVertical: 10, paddingHorizontal: 20}}>
            <Text style={{fontSize: 30, fontWeight: 600}}>Cart</Text>
            {CartList.length == 0 ? (
              <View style={{marginVertical: 50, alignItems: 'center'}}>
                <Image source={require('../../assets/images/misc/empty_bag.png')} style={{ width: 200, height: 200, resizeMode: "contain"}}  />
                <Text style={{marginTop: 30, fontSize: 16, fontWeight: 500}}>Your cart is empty!</Text>
              </View>
              ):(
              <View style={{gap: 10, marginTop: 20}}>
                {CartList.map((data: any)=> (
                  <Pressable key={data.id} onPress={() => {
                    navigation.push('detail', {index: data.index, id:data.id, type: data.type})
                  }}>
                    <CartItem 
                      id = {data.id}
                      name = {data.name}
                      donutname= {data.donutname}
                      prices = {data.prices}
                      type = {data.type}
                      image_item = {data.image_item}
                      addCartItemQuantityHandler = {addCartItemQuantityHandler}
                      removeCartItemQuantityHandler = {removeCartItemQuantityHandler}
                    />
                  </Pressable>
                ))}
              </View>
            )}
          </View>
          {CartList.length != 0 ? (
            <PaymentFooter buttonTitle='Pay' price={{price:CartPrice, currency: '$'}} buttonPressHandler={buttonPressHandler}/>
            ) : (
            <></>
          )}
        </View>
      </ScrollView>
    </View>
  )
}

export default Cart