var React = require('react-native');

var {
  View,
  Text,
  StyleSheet
} = React;


import currentWeather from "../Api/weatherapi"
import forecast from "../Api/weatherapi"
import weatherIcon from "../Utils/icons"
//constants used for background colors

var BG_HOT ="#FB9F4D";
var BG_WARM ="#FBD84D";
var BG_COLD ="#00ABE6";


var Weather = React.createClass ({
   getInitialState: function() {
    return {
      // weatherData: null,
      backgorundColor: "#FFFFFF",
      latitude: '37',
      longitude: '-122',
      city: '',
      temperature: '0 ˚F',
      temp_min: '0 ˚F',
      temp_max: '0 ˚F',
      description: '',
      humidity: null,
      icon: weatherIcon(),
      rain: null,
      wind: null,
      wind_speed: null,
      wind_direction: null
    };
  },
  getWeather() {
    currentWeather(this.state.latitude, this.state.longitude).then((data) => {
      let weatherList = response
      this.setState(data);
    });
  },
  render() {
    return (
    <View style={[styles.container, {backgorundColor: this.state.backgorundColor}]}>
      <View style={styles.currentWrapper}>
        <Text>Current Weather</Text>
        <Text>
          {this.state.city}
        </Text>
        <View style={styles.horContainer1}>
          <Text style={styles.icon}>
            {this.state.icon}
          </Text>
          <View style={styles.vertContainer}>
            <View style={styles.horContainer2}>
              <Text>Max: {this.state.temp_max}</Text>
            </View>
            <View style={styles.horContainer2}>
              <Text>Min: {this.state.temp_min}</Text>
            </View>
            <Text>Humidity: {this.state.humidity}</Text>
            <Text>Rain: {this.state.rain}</Text>
            <Text>Wind: {this.state.wind}</Text>
          </View>
      </View>
      <View style={styles.forecastWrapper}>
        <Text> Hourly Forecast </Text>
      </View>
    </View>
  );
 }
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch'
  },
  currentWrapper: {
    flex: 3,
    justifyContent: 'center',
    alignItems: 'center'
  },
  forecastWrapper: {
    flex: 5
  },
  icon: {
    // fontFamily: 'WeatherIcons-Regular',
    padding: 0
  }
});

module.exports = Weather;

@@ -1794,24 +1794,194 @@
     %3C/View%3E%0A
+        %3CView style=%7Bstyles.horContainer2%7D%3E%0A          %3CText%3E%7Bthis.state.temperature%7D%3C/Text%3E%0A          %3CText%3E%7Bthis.state.description%7D%3C/Text%3E%0A        %3C/View%3E%0A      %3C/View%3E%0A
       %3CView 
@@ -2185,30 +2185,29 @@
 %0A  %7D,%0A  
-currentWrapp
+horContain
 er
+1
 : %7B%0A    
@@ -2214,66 +2214,355 @@
 flex
-: 3,%0A    justifyContent: 'center',%0A    alignItems: 'center
+Direction: 'row',%0A    marginBottom: 20%0A  %7D,%0A  horContainer2: %7B%0A    flexDirection: 'row',%0A    alignItems: 'flex-start'%0A  %7D,%0A  vertContainer: %7B%0A    flex: 1,%0A    marginBottom: 10,%0A    marginTop: 10,%0A    backgroundColor: '#CCCCCC',%0A    padding: 15%0A  %7D,%0A  currentWrapper: %7B%0A    flex: 3,%0A    padding: 20,%0A    marginTop: 65,%0A    backgroundColor: '#F2F2F2
 '%0A  

update weather view with sections