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

class Diruption extends React.Component {
    state = {
        gid: '9022014005700002',
        disruptions: [],
        token: undefined,
        tokenClass: new AccessToken()
    }

    handleChangeGid = event => {
        this.setState({ lat: 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/ts/v1/traffic-situations/stoppoint/'+this.state.gid, { headers })
        //axios.get('https://api.vasttrafik.se/ts/v1/traffic-situations/stoppoint/9022014005700002', { headers })
            .then(response => {
                console.log(response)
                this.setState({
                    disruptions: response.data
                })
            })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Stoppoint Gid:
                        <input type="text" name="gid" onChange={this.handleChangeGid} />
                    </label>
                    <button type="submit">Find traffic disruptions</button>
                </form>
                <h1>
                    {this.state.gid}
                </h1>
                {this.state.disruptions.map((item) => 
                    <div>
                        <h1>
                            {item.description}
                        </h1>
                    </div>
                )}
            </div>
        )
    }
}
export default Diruption