import React, { Component } from 'react';
import Unsplash from 'unsplash-js';
import './App.css';

const unsplash = new Unsplash({
  applicationId: '', //removed for security reasons
  secret: '',
  callbackUrl: 'https://unsplash.com/oauth/',
  headers: {
    "Accept-Version": "v1",
    page: 1
  }
});

class App extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    const authenticationUrl = unsplash.auth.getAuthenticationUrl(['public']);
    console.log(authenticationUrl);
    location.assign(authenticationUrl);

    unsplash.auth.userAuthentication('mountain'.code)
      .then(string => JSON.stringify(string))
      .then(json => {
        unsplash.auth.setVearerToken(json.access_token);
      });
  }

  handleClick() {
    //let query = document.getElementById('input').value;
    fetch('https://api.unsplash.com/photos/?client_id=' + unsplash.applicationId)
      .then(response => console.log(response))
      .catch(error => console.log('error: ' + error));
  }
render() {
    return (
      <div className="App">
        <form id='form'>
          <input type='text' id='input' ></input>
          <input type='submit' id='submit' onClick={this.handleClick} ></input>
        </form>
        <div id='field' >
        </div>
      </div>
    );
  }
}

export default App;