import React from 'react'
import PropTypes from 'prop-types'

export default class UploadForm extends React.Component {
  constructor () {
    super()

    this.form = React.createRef()

    this.onSubmit = this.onSubmit.bind(this)

    this.state = {
      error: false,
      success: false,
    }
  }

  onSubmit (e) {
    e.preventDefault()

    const data = new FormData(this.form.current)

    fetch('/api/source-maps', {
      method: 'POST',
      headers: {
        accepts: 'application/json',
      },
      body: data,
    })
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          success: true,
          error: false,
        })
      })
      .catch((res) => {
        this.setState({
          success: false,
          error: true,
        })
      })
  }

  render () {
    // const { error, success } = this.state
    const error = true
    const success = true


    return (
      <form ref={this.form} action='/api/source-maps' method='POST' encType='multipart/form-data' onSubmit={this.onSubmit}>
        {success && <div className='success message'>Source Map Uploaded</div>}
        {error && <div className='error message'>Error Uploading Source Map</div>}
        <div>
          <label htmlFor='application'>Application</label>
          <input type='text' name='application' placeholder='Application' defaultValue='algot' />
        </div>

        <div>
          <label htmlFor='application'>UI</label>
          <input type='text' name='uiPlatform' placeholder='UI' />
        </div>

        <div>
          <label htmlFor='application'>Version</label>
          <input type='text' name='version' placeholder='Version' defaultValue='4.3.0' />
        </div>

        <div>
          <input type='file' name='map' required />
        </div>

        <div>
          <button type='submit'>Upload</button>
        </div>
      </form>
    )
  }
}