import React, { useState, useSyncExternalStore } from "react";
import { View, StyleSheet, Text, Button, TouchableHighlight, Image } from "react-native";
import { City, FAVORITE_CITY_DATA, getCurrentWeather, Weather } from "../data/stub";


type VilleProps = {
    city: City,
    fav: City
}


export function VilleCompopo(props: VilleProps){
const weather = getCurrentWeather(props.city.name);
    return (
      <View style={styles.container}>
        <View style={{flex: 1, flexDirection: "row"}}>
          <View style={styles.bothtext}>
            <Text style={styles.title}>{props.city.name}</Text>
            <Text>{props.city.latitude} - {props.city.longitude}</Text>
          </View>
            <Text style={styles.temperature}>{weather?.temperature}</Text>
        <TouchableHighlight /*onPress={() => FAVORITE_CITY_DATA = this.city}*/>
              <Image source={props.city.longitude===FAVORITE_CITY_DATA.longitude && props.city.latitude===FAVORITE_CITY_DATA.latitude ? require('../assets/yellowstar.png') : require('../assets/blackstar.png')} style={styles.button}/>
        </TouchableHighlight>
        </View>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "darksalmon",
    marginVertical: 5,
    borderRadius: 15,
    width: "90%",
    alignSelf: 'center'
  },
  title: {
    fontWeight: "bold",
    fontSize: 18
  },
  bothtext: {
    margin: 10
  },
  temperature: {
    marginTop: 20,
    fontSize: 18,
    fontWeight: "bold"
  },
  button: {
    height: 30,
    width: 30,
    marginTop: 13,
    alignSelf: "flex-end",
    margin: 5
  }
});