import React from 'react'
import ReactDOM from 'react-dom'
import SeasonDisplay from './SeasonDisplay'
import Spinner from './Spinner'

class App extends React.Component {

    // specific to JS not to React
    // constructor(props) {
    //     super(props)
    //     this.state = { lat: null, errorMessage: '' }
    // }

    state = { lat: null, errorMessage: '' }

    componentDidMount() {
        window.navigator.geolocation.getCurrentPosition(
            postion => this.setState({ lat: postion.coords.latitude }),
            err => this.setState({ errorMessage: err.message })
        )
    }

    render() {

        if (this.state.errorMessage && !this.state.lat) {
            return <div>Error: {this.state.errorMessage}</div>
        }

        if (!this.state.errorMessage && this.state.lat) {
            return <SeasonDisplay lat={this.state.lat} />
        }

        return <Spinner message="Please accept location request..." />
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('#root')
)