import React from 'react';
import axios from 'axios';

class NearbyStation extends React.Component {
    state = {
        lat: '57.7',
        long: '12.0',
        stops: [],
        token: undefined,
        device: '123',
    }

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

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

    handleChangeToken = event => {
        this.setState({ token: event.target.value})
    }

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

        const headers = {
            'Authorization': 'Bearer ' + this.state.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=20&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>
                    <label>
                        Token:
                        <input type="text" name="token" onChange={this.handleChangeToken} />
                    </label>
                    <button type="submit">Stops</button>
                </form>
                <h1>
                    {this.state.lat}
                </h1>
                <h1>
                    {this.state.long}
                </h1>
                {this.state.stops.map((item) =>
                    <div>
                        <h1>
                            {item.name},
                            {item.id},
                            {item.lat},
                            {item.lon},
                            {item.track}
                        </h1>
                    </div>
                )}
            </div>
        )
    }
}
export default NearbyStation

//https://api.vasttrafik.se/bin/rest.exe/v2/location.nearbystops?originCoordLat=57.5987&originCoordLong=11.9454&maxNo=20&format=json

//https://api.vasttrafik.se/bin/rest.exe/v2/location.nearbystops


//'https://reqres.in/api/articles'

//'https://api.vasttrafik.se/token'

//grant_type=client_credentials&scope=<device_id>

//BPvMjPidHckBtETZxr3dHP1rptQa
//z5MFCS_wwmqprc0s4iLZWBAUJdga