import { Image, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { AntDesign } from '@expo/vector-icons';


interface CartItemProps{
    id: string;
    name: string;
    donutname: string;
    prices: any;
    type: string;
    image_item: ImageProps;
    addCartItemQuantityHandler: any;
    removeCartItemQuantityHandler: any;
}


const CartItem:React.FC<CartItemProps> = ({
    id,
    name,
    donutname,
    prices,
    type,
    image_item,
    addCartItemQuantityHandler,
    removeCartItemQuantityHandler,
}) => {

  return (
    <View>
      {prices.length != 1 ? (
            <View style={{flex: 1, gap: 10, padding: 10, borderRadius: 10, borderColor: '#DA7297', borderWidth: 1}}>
                <View style={{flex:1, flexDirection: 'row', gap: 10}}>
                    <Image source={image_item} style={{height: 80, width: 80}}/>
                    <View style={{flex:1, paddingVertical: 5, justifyContent: 'space-between'}}>
                        <View>
                            <Text style={{fontSize: 16, color: '#EF5A6F', fontWeight: 500, marginBottom: 10}}>{name || donutname}</Text>
                        </View>
                        {prices.map((data: any, index: any) => (
                            <View key={index.toString()} style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', gap: 20}}>
                                <View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
                                    <View style={{padding: 10, justifyContent: 'center', alignItems: 'center'}}>
                                        <Text style={{fontSize: type == 'Drink' ? 16 : 18}}>{data.size}</Text>
                                    </View>
                                    <Text style={{fontSize: 16, color: '#EF5A6F'}}>{data.currency}{data.price}</Text>
                                </View>
                                <View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
                                    <Pressable onPress={() => {removeCartItemQuantityHandler(id, data.size)}}>
                                        <AntDesign name="minussquare" size={30} color="#DA7297" />
                                    </Pressable>
                                    <View style={{padding: 2, borderColor: '#DA7297', borderWidth: 2, width: 30, alignItems: 'center'}}>
                                        <Text>{data.quantity}</Text>
                                    </View>
                                    <Pressable onPress={() => {addCartItemQuantityHandler(id, data.size)}}>
                                        <AntDesign name="plussquare" size={30} color="#DA7297" />
                                    </Pressable>
                                </View>
                            </View>
                        ))}
                    </View>
                </View>
            </View>
        ) : (
            <View style={{flexDirection: 'row', gap: 10, padding: 10, borderRadius: 10, borderColor: '#DA7297', borderWidth: 1}}>
                <View>
                    <Image source={image_item} style={{height: 80, width: 80}}/>
                </View>
                <View style={{flex: 1}}>
                   <Text style={{fontSize: 16, color: '#EF5A6F', fontWeight: 500, marginBottom: 10}}>{name || donutname}</Text> 
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', gap: 20}}>
                        <View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
                            <View style={{padding: 10, justifyContent: 'center', alignItems: 'center'}}>
                                <Text style={{fontSize: type == 'Drink' ? 14 : 16}}>{prices[0].size}</Text>
                            </View>
                            <Text style={{fontSize: 16, color: '#EF5A6F'}}>{prices[0].currency}{prices[0].price}</Text>
                        </View>
                        <View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
                            <Pressable onPress={() => {removeCartItemQuantityHandler(id, prices[0].size)}}>
                                <AntDesign name="minussquare" size={30} color="#DA7297" />
                            </Pressable>
                            <View style={{padding: 2, borderColor: '#DA7297', borderWidth: 2, width: 30, alignItems: 'center'}}>
                                <Text>{prices[0].quantity}</Text>
                            </View>
                            <Pressable onPress={() => {addCartItemQuantityHandler(id, prices[0].size)}}>
                                <AntDesign name="plussquare" size={30} color="#DA7297" />
                            </Pressable>
                        </View>
                    </View>    
                </View>
            </View>
        )}
    </View>
  )
}

export default CartItem

const styles = StyleSheet.create({})