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




const Favorite = ({navigation}: any) => {
  const FavoriteList = useStore((state: any) => state.FavoriteList);
  const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);
  const deleteFromFavoriteList = useStore((state: any) => state.deleteFromFavoriteList);

  const ToggleFavourite = (favourite: boolean, type: string, id: string) => {
    favourite ? deleteFromFavoriteList(type, id) : addToFavoriteList(type, id)
  };




  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}}>
            <Text style={{paddingHorizontal: 20, fontSize: 30, fontWeight: 600}}>Favorite List</Text>
            {FavoriteList.length == 0 ? (
              <View style={{marginVertical: 50, alignItems: 'center'}}>
                <Image source={require('../../assets/images/misc/fav.png')} style={{ width: 200, height: 200, resizeMode: "contain"}}  />
                <Text style={{marginTop: 30, fontSize: 16, fontWeight: 500}}>Your have no favorite list!</Text>
              </View>
              ):(
              <View style={{gap: 10, marginTop: 20}}>
                {FavoriteList.map((data: any)=> (
                  <Pressable key={data.id} onPress={() => {
                    navigation.push('detail', {index: data.index, id:data.id, type: data.type})
                  }}>
                    <FavCard 
                      id={data.id}
                      image_item={data.image_item}
                      name={data.name}
                      donutname={data.donutname}
                      type={data.type}
                      calories={data.calories}
                      average_rating={data.average_rating}
                      ratings_count={data.ratings_count}
                      description={data.description}
                      favourite={data.favourite}
                      ToggleFavouriteItem={ToggleFavourite}
                    />
                  </Pressable>
                ))}
              </View>
            )}
          </View>
        </View>
      </ScrollView>
    </View>
  )
}

export default Favorite