import React, { Component, PropTypes, } from 'react';
import { reduxForm, } from 'redux-form';

import Dropzone from 'react-dropzone';

export const fields = ['files',];

@reduxForm({
  form: 'simple',
  fields,
})
export default class SimpleForm extends Component {

  static propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    resetForm: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
  };

  constructor() {
    super()

    this.state = {
      files: []
    }
  }

  handleSubmit(data) {
    var body = new FormData();
    // body.append('files[0]', data.files[0])
    for (let i = 0; i < data.files.length; i++) {
      const file = data.files[i]
      body.append(`files[${i}]`, data.files[i])

      let previews = this.state.files
      previews.push(data.files[i])
      this.setState({
        files: previews
      })
    }

    // Object.keys(data).forEach(( key ) => {
    //   // console.log(key)
    //   // console.log(data[key])
    //   Object.keys(data[key]).forEach((k) => {
    //     const file = data[key][k]
    //     console.log('---> file:', file)
    //     console.log('---> state:', this.state)
    //     this.setState({
    //       file: file
    //     })
    //   })
    //   body.append(key, data[ key ]);
    // });
    //
    // console.log(data);
    console.log('----> body:', body);
    console.log('----> data:', data);

    fetch(`http://api.mychilds.life/v1/file/upload?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEsImlzcyI6Imh0dHA6XC9cL2FwaS5teWNoaWxkcy5saWZlXC92MVwvYXV0aFwvbG9naW4iLCJpYXQiOjE0NjcwMTc1NTksImV4cCI6MTQ2NzI3Njc1OSwibmJmIjoxNDY3MDE3NTU5LCJqdGkiOiIyMGE5OTczYjkwMzliNDhiYjY4MDY0NzExOGU3NmM4NSJ9.c7aMnwNEbJB7fOZZ6CRszuQOQFI2UAeclRJmBU-VDuA`, {
      method: 'POST',
      body: body
    })
    .then(res => res.json())
    .then(res => console.log(res))
    .catch(err => console.log(err));
  }

  displayPreview() {
    console.log('---> display preview:', this.state)
    if (this.state.files) {
      return (
        <div>
          {this.state.files.map((file) => {
            return <img src={file.preview} />
          })}
        </div>
      )
    } else {
      return (
        <span />
      )
    }
  }

  render() {
    const {
      fields: { files, },
      handleSubmit,
      resetForm,
      submitting,
    } = this.props;
    return (
      <form onSubmit={ handleSubmit }>
        <div>
          <label>Files</label>
          <div>
            <Dropzone
              { ...files }
              onDrop={ ( filesToUpload, e ) => {
                  files.onChange(filesToUpload)
                  this.handleSubmit(::this.handleSubmit)
                }
              }
            >
              <div>Try dropping some files here, or click to select files to upload.</div>
            </Dropzone>
          </div>
        </div>
        <div>
          <button
            disabled={ submitting }
            onClick={ handleSubmit(::this.handleSubmit) }
          >
            { submitting ? <i/> : <i/> } Submit
          </button>
          <button
            disabled={ submitting }
            onClick={ resetForm }
          >
            Clear Values
          </button>
        </div>
        {this.displayPreview()}
      </form>
    );
  }
}