import { Pressable, StyleSheet, Text, View } from 'react-native'
import React, { useState } from 'react'
import { useStore } from '../store/store'
import { StatusBar } from 'expo-status-bar';
import { ScrollView, TouchableWithoutFeedback } from 'react-native-gesture-handler';
import BackgroundDrinkInfo from "../components/BackgroundDrinkInfo";
import PaymentFooter from "../components/PaymentFooter";


const DetailDrink = ({navigation, route}: any) => {
    const ItemOfIndex = useStore((state: any) =>
        route.params.type == 'Donut' ? state.AllDonutMenu : state.AllDrinkMenu,
    )[route.params.index];

    const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);
    const deleteFromFavoriteList = useStore((state: any) => state.deleteFromFavoriteList);

    //favorite functionality
    const ToggleFavorite = (favourite: boolean, type: string, id: string) => {
        favourite ? deleteFromFavoriteList(type, id) : addToFavoriteList(type, id)
    }

    //add to cart
    const addToCart = useStore((state: any) => state.addToCart);
    const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);

    const addtoCartHandler = ({
        id, 
        index, 
        name, 
        image_item, 
        type, 
        price
    }: any) => {
        addToCart({
            id, 
            index, 
            name, 
            image_item, 
            type, 
            prices:[{...price, quantity:1}],
        });
        calculateCartPrice();
        navigation.navigate('cart')
    }

    //backhandler functionality
    const BackHandler = () => {
        navigation.pop();
    }
    
    //desc
    const [descriptionDrink, setDescriptionDrink] = useState(false);

    //set prices
    const [price, setPrice] = useState(ItemOfIndex.prices[0]);

     

  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      <StatusBar backgroundColor='dark'/>
      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1, justifyContent: 'space-between'}}>
        <BackgroundDrinkInfo 
            EnableBackHandler={true}
            type={ItemOfIndex.type}
            id={ItemOfIndex.id}
            image_item={ItemOfIndex.image_item}
            favourite={ItemOfIndex.favourite}
            name={ItemOfIndex.name}
            calories={ItemOfIndex.calories}
            average_rating={ItemOfIndex.average_rating}
            ratings_count={ItemOfIndex.ratings_count}
            BackHandler={BackHandler}
            ToggleFavorite={ToggleFavorite}
        />
        <View style={{padding: 10, marginHorizontal: 10, marginVertical: 10}}>

            {descriptionDrink? (
                <TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
                    <Text style={{color: 'gray', fontSize: 16}}>{ItemOfIndex.description}</Text>
                </TouchableWithoutFeedback>
                ) : (
                <TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
                    <Text style={{color: 'gray', fontSize: 16}} numberOfLines={3}>{ItemOfIndex.description}</Text>
                </TouchableWithoutFeedback>
            )}

            <View style={{marginVertical: 20}}>
                <Text style={{fontSize: 18, fontWeight: 500, color: '#EF5A6F'}}>Size</Text>
                <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', gap: 10}}>
                    {ItemOfIndex.prices.map((data: any) => (
                        <Pressable onPress={() => {setPrice(data)}} key={data.size} style={[styles.sizeBox, {borderColor: data.size == price.size ? '#DA7297' : 'gray', backgroundColor: data.size == price.size ? '#DA7297' : 'white'}]}>
                            <Text style={{fontSize: ItemOfIndex.type == 'Drink'? 14: 16, color: data.size == price.size ? 'white' : 'gray'}}>{data.size}</Text>
                        </Pressable>
                    ))}
                </View>
            </View>
        </View>

        <PaymentFooter 
            price={price} 
            buttonTitle = 'Add to cart' 
            buttonPressHandler={() => {
                addtoCartHandler({
                    id: ItemOfIndex.id,
                    index: ItemOfIndex.index,
                    name: ItemOfIndex.name,
                    image_item: ItemOfIndex.image_item,
                    type: ItemOfIndex.type, 
                    price: price,
                })
            }}
        />
      </ScrollView>
    </View>
  )
}

export default DetailDrink

const styles = StyleSheet.create({
    sizeBox:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 10,
        marginTop: 10,
        borderRadius: 5,
        borderWidth: 1
    }
})