text: import React, { useState, useEffect, useCallback} from 'react';
  import { View, Text, StyleSheet, Switch, Platform } from 'react-native';
  import { useDispatch } from 'react-redux';
  
  import HeaderButton from '../components/HeaderButtton';
  import Colors from '../constants/Colors';
  import { HeaderButtons, Item } from 'react-navigation-header-buttons'
  import { setFilters } from '../store/actions/meals';
  
  const FilterSwitch= props => {
    return(
        <View style = {styles.filterContainer}>
        <Text>{props.label}</Text>
        <Switch 
        trackColor = {{true: Colors.primaryColor}}
        thumbColor = { Platform.OS=== 'android' ? Colors.primaryColor : ''}
        value = {props.state} 
        onValueChange = {props.onChange}/>
      </View>
    );
  }
  
  const FiltersScreen = props => {
    const { navigation } = props;
  
    const [isGlutenFree, setIsGlutenFree] = useState(false);
    const [isLactosFree, setIsLactosFree] = useState(false);
    const [isVegan, setIsVegan] = useState(false);
    const [isVegetarian, setIsVegetarian] = useState(false);
  
    const dispatch = useDispatch();
  
  
    const saveFilters = useCallback( () => {
      const appliedFilters = {
        glutenFree: isGlutenFree,
        lactoseFree: isLactosFree,
        vegan: isVegan,
        vegetarian: isVegetarian
      };
  
      dispatch(setFilters(appliedFilters));
    }, [isGlutenFree, isLactosFree, isVegan, isVegetarian, dispatch]);
  
    useEffect(() => {
      navigation.setParams({save: saveFilters});
    }, [saveFilters]);
  
    return (
      <View style={styles.screen}>
        <Text style = {styles.title}>Available Filters / Restrictions</Text>
        
        <FilterSwitch 
        label = 'Gluten-free' 
        state = {isGlutenFree} 
        onChange = {newValue => setIsGlutenFree(newValue)} />
        
        <FilterSwitch 
        label = 'Lactos-free' 
        state = {isLactosFree} 
        onChange = {newValue => setIsLactosFree(newValue)} />
         
        <FilterSwitch 
        label = 'Vegan' 
        state = {isVegan} 
        onChange = {newValue => setIsVegan(newValue)} />
        
        <FilterSwitch 
        label = 'Vegetarian' 
        state = {isVegetarian} 
        onChange = {newValue => setIsVegetarian(newValue)} />
        
      </View>
    );
  };
  
  
  FiltersScreen.navigationOptions = (navData) =>{
    return {
    headerTitle: 'Filter Meals',
    headerLeft: () => (
      <HeaderButtons HeaderButtonComponent = {HeaderButton}>
        <Item 
          title = "Menu" 
          iconName = 'ios-menu' 
          onPress = {() => {
          navData.navigation.toggleDrawer();
        }} />
      </HeaderButtons>
    ),
    headerRight: () => (
        <HeaderButtons HeaderButtonComponent = {HeaderButton}>
          <Item 
            title = "Save" 
            iconName = 'ios-save' 
            onPress = {
              navData.navigation.getParam('save')} 
          />
        </HeaderButtons>
    ),
    };
  };
  const styles = StyleSheet.create({
    screen: {
      flex: 1,
      alignItems: 'center'
    },
    filterContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '80%',
        marginVertical: 15
    },
    title: {
      fontFamily: 'open-sans-bold',
      fontSize: 22,
      margin: 20,
      textAlign: 'center'
    }
  });
  
  export default FiltersScreen;
  