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

class AccessToken extends React.Component {
  state = {
    token: 'No token',
    responseFromVT: 'No response'
  }

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

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

    const headers = {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Basic ' + this.state.token
    };
    this.setState({
      token: 'Attempting to send token'
    })

    axios.post('https://api.vasttrafik.se/token', { headers })
      .then(response => {
        this.setState({
          responseFromVT: response.data.access_token,
          token: 'token sent'
        })
      .error(res => {
        this.setState({
          responseFromVT: "some error",
          token: "some error occured"
        })
      })
    })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Key:
            <input type="text" name="token" onChange={this.handleChange} />
          </label>
          <button type="submit">Get Token</button>
        </form>
        <h1>
          {this.state.responseFromVT}
        </h1>
        <h1>
          {this.state.token}
        </h1>
      </div>
    )
  }
}
export default AccessToken

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

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

//grant_type=client_credentials&scope=<device_id>

//5ty7gxmAfQlUHDHdm7kgaqXwK5Ia 
//wpIOURnJJcTtO6rORYmYYPq4wXka