import React from 'react';
import logo from './logo.svg';
import './App.css';

const PLACES = [
  { name: "Moscow", zip: "119311" },
  { name: "St. Petersburg", zip: "188506" },
  { name: "Obninsk", zip: "249032" },
  { name: "Missoula", zip: "59847" }
]

function toCelsius(fahrenheit) {
  return Math.round((fahrenheit - 32) * 5 / 9);
}

class Weather extends React.Component{

  constructor(){
    super();
    this.state = {
        weatherData: null
    }
  }

  componentDidMount(){
    const zip = this.props.zip;
    const URL = "http://api.openweathermap.org/data/2.5/weather?q=" + zip + "&appid=b1b35bba8b434a28a0be2a3e1071ae5b&units=imperial";
    fetch(URL).then(res => res.json()).then(json => this.setState({weatherData: json}))
  };

  render(){
    const weatherData = this.state.weatherData;
    if (!weatherData) return <div>Loading...</div>
    const weather = weatherData.weather[0];
    const iconURL = "http://openweathermap.org/img/w/" + weather.icon + ".png";
    return(
      <div>
        <h1>
          {weather.main} in {weatherData.name}
          <img src = {iconURL} alt = {weatherData.description} />
        </h1>
        <p>Сейчас: {toCelsius(weatherData.main.temp)}&#8451;</p>
        <p>Максимум: {toCelsius(weatherData.main.temp_max)}&#8451;</p>
        <p>Минимум: {toCelsius(weatherData.main.temp_min)}&#8451;</p>
        <p>Ветер: {weatherData.wind.speed} м/с</p>
      </div>
    );

  }
}

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      activePlace: 0,
    };
  }
  render() {
    const activePlace = this.state.activePlace;
    return (
      <div className="App">
        {
          PLACES.map((place, index) =>
          <button
            key = {index}
            onClick = {() =>
              this.setState({activePlace: index})
            }
          >
            {place.name}
          </button>)
        }
        <Weather
          key = {activePlace}
          zip = {PLACES[activePlace].zip} />
      </div>
    );
  }
}

export default App;