/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, TextInput, Button, ToastAndroid} from 'react-native';

export default class App extends Component {
  constructor(props){
    super(props)

    this.state = {
      isLoading: true,
      weatherConditions: 'N/A',
      temperature: 'N/A',
      windSpeed: 'N/A',
      currentCity: 'N/A'
    }
  }

  componentWillMount() {
    fetch('https://api.openweathermap.org/data/2.5/weather?q=tampere&units=metric&appid=6c433438776b5be4ac86001dc88de74d')
    .then( response=>response.json())
    .then((responseJson) => {
       //Kaivetaan haluttu data ja talletetaan stateen
       console.log("Temperature" + responseJson.main.temp )
       this.setState( {
         temperature: responseJson.main.temp,
         isLoading: false
       });
    });


  }

  render() {
    if( this.state.isLoading ){
      return(
        <Text style={{fontSize: 50}}>Lataa säätietoja..</Text>
      );
    }
    return (
      <View style ={{flex: 1, backgroundColor: 'lightgrey'}}>
        <Text style={styles.header}>Tampere</Text>
        <View style={styles.weather}>
          <Image style={styles.weatherIconStyle} source={require('./Images/draw_sunny.png')}></Image>
          <Text style={styles.temperatureTextStyle}>{this.state.temperature}</Text>
        </View>
        <View style={styles.getWeatherArea}>
          <TextInput style={styles.textInputStyle} value={"Tampere..."}></TextInput>
          <Button style={styles.getWeatherButtonStyle} title="Hae säätiedot"></Button>
        </View>

        <Text>Longitude</Text>
        <Text>Latitude</Text>
        <Button title="Get by location"></Button>
        <Button title="5 day forecast"></Button>
      </View>
    );
  }

  fetchWeatherDataFromServer() {
    // Haetaan data OpenWeatherMap APIsta

    // Kaivetaan lämötila, tuulen nopeus ja säätila ja
    // päivitetää state kutsumalla setState...

    // => Renderiä kutsutaan automaattisesti

  }
}

const styles = StyleSheet.create({
  header: {
    height: '15%',
    backgroundColor: 'lightblue',
    fontSize: 30,
    textAlign: 'center',
    textAlignVertical: 'center'
  },
  weather: {
    height: '30%',
    flexDirection: 'row',
    borderWidth: 0.5,
    borderColor: 'black'
  },
  getWeatherArea: {
    flexDirection: 'row',
    borderWidth: 0.5,
    borderColor: 'black'
  },
  weatherIconStyle: {
    height: '100%',
    flex: 1,
    resizeMode: 'stretch'
  },
  temperatureTextStyle: {
    height: '100%',
    flex: 1,
    fontSize: 50,
    textAlign: 'center',
    textAlignVertical: 'center'
  },
  textInputStyle: {
    flex: 6,
    fontSize: 30
  },
  getWeatherButtonStyle: {
    color: "#841584",
    flex: 4
  },
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonContainer: {
    flex: 1
  }

});