import { View, Text, StyleSheet, TouchableHighlight } from "react-native"
import { FlatList } from "react-native-gesture-handler"
import { CITIES_DATA, City, getCurrentWeather, FAVORITE_CITY_DATA } from "../data/stub"
import { VilleCompopo } from "../components/VilleCompopo";
import { TopBar } from "../components/TopBar";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { getCityList } from "../redux/actions/getCityList";


export default function CityList({navigation}){

    const cityList = useSelector(state => state.appReducer.cityList);
    // Create a const that will hold the react-redux events dispatcher
    const dispatch = useDispatch();
    
    // Let's define a hook that will be used to update the rendered state after the return will be called
    // You cannot perform side-effects outside of a useEffect hook
    useEffect(() => {
      const loadCity = async () => {
        await dispatch(getCityList());
      };
      loadCity();
      console.log(cityList)
    }, [dispatch]);

    return (
        <View style={{flex: 1, width: "100%", alignItems: "center"}}>
            <TopBar/>
            <FlatList
            data={cityList}
            keyExtractor={item =>item.name}
            renderItem={({item}) => <TouchableHighlight onPress={() => navigation.navigate("CityDetails", {"city": item})}><VilleCompopo city={item} fav={FAVORITE_CITY_DATA}/></TouchableHighlight>}
            style={leStyle.container} 
            />
        </View>
    )
}


const leStyle = StyleSheet.create({
    container: {
        flex: 1,
        alignContent: 'center',
        width: '100%'
    },
});