import React, { Component } from 'react';
import "../styles/MainPage.css"

class MainPage extends Component {
    constructor(props) {
        super(props);  
        this.state = {
            currentWeather : [],
            isLoaded: false,
            error: null
        }
      }

    componentDidMount(){
        //token for API request
        const token = "&APPID=dc7912235b38897f91307afe6e1162c3"
        const unit = "&units=metric"
        //API address
        const apiUrl ='http://api.openweathermap.org/data/2.5/weather?q=Tampere,fi'
            fetch(apiUrl+token+unit)
                .then(res => res.json())              
                .then(
                    (result) => {
                        const tempArr =[]
                        tempArr.push(result.main.temp)
                        tempArr.push(result.wind.speed)
                        this.setState({
                            isLoaded: true,
                            currentWeather: tempArr
                        })
                        console.log(result)
                    },
                    (error) => {
                        this.setState({
                            isLoaded: true,
                            error
                        })
                    }                     
                )                                       
    }

    render() {  
        const {currentWeather, isLoaded} = this.state
            if(isLoaded){
                return (              
                    <div className="weatherBox">   
                    {/* <ul>
                            <li>testdata</li>
                            <li>testdata</li>
                            <li>testdata</li>
                        </ul>
                    */}

                        <ul>
                            <li>Lämpötila: { JSON.stringify(currentWeather[0]) }C</li>
                            <li>Tuuli: { JSON.stringify(currentWeather[1]) }m/s</li>
                            <li>Tuntuu kuin: ?</li>
                        </ul>              
                    </div>            
                );
                }
                else{
                    return <p>Lataa...</p>
                }
    }
}

export default MainPage;