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



const Detail = ({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,
    donutname,
    image_item, 
    type, 
    price
  }: any) => {
    addToCart({
      id,
      index,
      donutname,
      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'}}>
      <BackgroundInfo 
        EnableBackHandler={true}
        type={ItemOfIndex.type}
        id={ItemOfIndex.id}
        image_item={ItemOfIndex.image_item}
        favourite={ItemOfIndex.favourite}
        donutname={ItemOfIndex.donutname}
        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, marginTop: 10}}>{ItemOfIndex.description}</Text>
          </TouchableWithoutFeedback>
        ) : (
          <TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
              <Text style={{color: 'gray', fontSize: 16, marginTop: 10}} numberOfLines={3}>{ItemOfIndex.description}</Text>
          </TouchableWithoutFeedback>
        )}
      </View>
      <PaymentFooter 
        price={price} 
        buttonTitle = 'Add to cart' 
        buttonPressHandler={() => {
          addtoCartHandler({
            id: ItemOfIndex.id,
            index: ItemOfIndex.index,
            donutname: ItemOfIndex.donutname,
            image_item: ItemOfIndex.image_item,
            type: ItemOfIndex.type, 
            price: price,
          })
        }}
      />
    </ScrollView>
  </View>
  )
}

export default Detail