text: import React, { useEffect, useCallback } from "react";
  import { View, Text, StyleSheet, ScrollView, Image } from "react-native";
  import { HeaderButtons, Item } from "react-navigation-header-buttons";
  import { useSelector, useDispatch } from "react-redux";
  
  import MyHeaderButton from "../components/MyHeaderButton";
  import DefaultText from "../components/DefaultText";
  import Colors from "../constants/Colors";
  import ListItem from "../components/ListItem";
  import { toggleFavorite } from "../store/actions/meals";
  
  const MealDetailScreen = (props) => {
    // we pass in all the meals because we are tryna find a specific meal
    // with a specific ID
    const allMeals = useSelector((state) => state.meals.meals);
    const mealId = props.navigation.getParam("mealId");
    const isFavorite = useSelector((state) =>
      state.meals.favoriteMeals.some((meal) => meal.id === mealId)
    );
    const selectedMeal = allMeals.find((meal) => meal.id === mealId);
  
    const dispatch = useDispatch();
  
    const toggleFavoriteHandler = useCallback(() => {
      dispatch(toggleFavorite(mealId));
    }, [dispatch, mealId]);
  
    useEffect(() => {
      props.navigation.setParams({ toggleFav: toggleFavoriteHandler });
    }, [toggleFavoriteHandler]);
  
    useEffect(() => {
      props.navigation.setParams({ isFav: isFavorite });
    }, [isFavorite]);
  
    return (
      <ScrollView>
        <Image source={{ uri: selectedMeal.imageUrl }} style={styles.image} />
        <View style={styles.details}>
          <DefaultText style={styles.item}>
            {selectedMeal.duration} minutes
          </DefaultText>
          <DefaultText style={styles.item}>{selectedMeal.complexity}</DefaultText>
          <DefaultText style={styles.item}>
            {selectedMeal.affordability}
          </DefaultText>
        </View>
        <Text style={styles.title}>Ingredients</Text>
        {selectedMeal.ingredients.map((ingredient) => (
          <ListItem key={ingredient}>{ingredient}</ListItem>
        ))}
        <Text style={styles.title}>Steps</Text>
        {selectedMeal.steps.map((step) => (
          <ListItem key={step}>{step}</ListItem>
        ))}
      </ScrollView>
    );
  };
  
  MealDetailScreen.navigationOptions = (navigationData) => {
    const mealTitle = navigationData.navigation.getParam("mealTitle");
    const toggleFavorite = navigationData.navigation.getParam("toggleFav");
    const isFavorite = navigationData.navigation.getParam("isFav");
    return {
      headerTitle: mealTitle,
      headerRight: () => (
        <HeaderButtons HeaderButtonComponent={MyHeaderButton}>
          <Item
            iconName={isFavorite ? "ios-star" : "ios-star-outline"}
            title="Favorite"
            size={24}
            onPress={toggleFavorite}
          />
        </HeaderButtons>
      ),
    };
  };
  
  const styles = StyleSheet.create({
    image: {
      width: "90%",
      height: 200,
      borderWidth: 1,
      borderRadius: 20,
      alignSelf: "center",
      borderColor: Colors.primary,
    },
    details: {
      flexDirection: "row",
      padding: 15,
      justifyContent: "space-around",
    },
    title: {
      fontFamily: "KohinoorTelugu-Medium",
      fontSize: 22,
      textAlign: "center",
    },
    item: {
      borderWidth: 1,
      borderColor: Colors.primary,
      padding: 3,
      borderRadius: 5,
    },
  });
  
  export default MealDetailScreen;
  