import React from 'react';
import axios from 'axios';
import AccessToken from '../classes/AccessToken';
import StopComponent from './StopComponent';
import Stop from '../classes/Stop';

class NearbyStation extends React.Component {
    state = {
        lat: '57.7',
        long: '12.0',
        stops: [],
        token: undefined,
        tokenClass: new AccessToken()
    }

    handleChangeLat = event => {
        this.setState({ lat: event.target.value});
    }

    handleChangeLong = event => {
        this.setState({ long: event.target.value});
    }

    handleSubmit = event => {
        event.preventDefault();

        const headers = {
            'Authorization': 'Bearer ' + this.state.tokenClass.token
        };

        console.log('Attempted connection')

        axios.get('https://api.vasttrafik.se/bin/rest.exe/v2/location.nearbystops?originCoordLat='+this.state.lat+'&originCoordLong='+this.state.long+'&maxNo=5&format=json', { headers })
            .then(response => {
                console.log(response.data.LocationList.StopLocation)
                this.setState({
                    stops: response.data.LocationList.StopLocation,
                })
            })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Lattitude coord:
                        <input type="text" name="lat" onChange={this.handleChangeLat} />
                    </label>
                    <label>
                        Longitude coord:
                        <input type="text" name="long" onChange={this.handleChangeLong} />
                    </label>
                    <button type="submit">Stops</button>
                </form>
                <h1>
                    {this.state.lat}
                </h1>
                <h1>
                    {this.state.long}
                </h1>
                {this.state.stops.map((item) =>
                    <StopComponent stop={item} />
                )}
            </div>
        )
    }
}

export default NearbyStation