import React from 'react';
import FileReaderInput from 'react-file-reader-input';
import CarVisualisation from './CarVisualisation'; 

export class Upload extends React.Component {

  constructor() { 
    super();
    this.state = {
      url: '',
      instances: []
    }
  }

  handleChange = (e) => {
    var file = e.target.files[0],
    reader = new FileReader();

    if (!file) return;

    const filename = file.name

    let last_dot = filename.lastIndexOf('.')
    let ext = filename.slice(last_dot + 1)
    let name = filename.slice(0, last_dot)

    reader.onloadend = (function () {
      // Since it contains the Data URI, we should remove the prefix and keep only Base64 string
      this.setState({url: reader.result})
      var b64 = reader.result.replace(/^data:.+;base64,/, '');

      this.getCars(b64, ext); 
    }).bind(this);

    reader.readAsDataURL(file);
  }

  getCars(picture, extension) {
   // const url = 'https://parking-koncept.herokuapp.com/analyze_parking';
   const url = 'https://parking-koncept.herokuapp.com/analyze_parking';
// The data we are going to send in our request
    let data = {
      picture_base64: picture,
      extension: extension
    }
// The parameters we are gonna pass to the fetch function
    let fetchData = { 
      method: 'POST', 
      body: JSON.stringify(data),
      headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
      }
    }
    fetch(url, fetchData)
    .then(response => {
      response.json().then( data => {
        this.setState({...this.state, instances: data})
      })
    });
  }



  render() {
    return (
      <form style={{backgroundColor: "white"}}>
        <label htmlFor="my-file-input">Upload a File:</label>
          <CarVisualisation src={this.state.url} instances={this.state.instances} />
          <input type="file" name="file" onChange={this.handleChange} style={{zIndex: 200}}/>

      </form>
    );
  }
}

export default Upload;