import React, { Component } from 'react'
import { Link } from 'react-router-dom'

import { session } from '../../../session'
import { capitalize } from '../../../util'

import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'

import { ImageSelection } from './media.formImageSelection'

export default class MediaImageForm extends Component {
  state = {
  }

  constructor(props) {
    super(props)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSettingsChange = this.handleSettingsChange.bind(this)
    this.handleUpload = this.handleUpload.bind(this)
  }

  handleChange(e) {
    const { name, value } = e.target
    this.handleSelect(name, value)
  }

  handleSelect(name, value) {
    this.props.onSelect(name, value)
  }

  handleSettingsChange(name, value) {
    this.props.onSettingsChange(name, value)
  }

  handleUpload(image) {
    // upload fullsize
    this.uploadFullSize(image)
    .then(res => {
      this.props.onSettingsChange('fullsize', data.res)
      setTimeout(() => {
      })     
    })
  }

  uploadFullSize(image) {
    actions.upload.upload({
      image,
      tag: 'fullsize',
      username: 'animism',
    }).then(data => {
      console.log(data.res)
      return data.res
    })
  }
  
  uploadThumbnail(image) {
    actions.upload.upload({
      image,
      tag: 'thumbnail',
      username: 'animism',
    }).then(data => {
      console.log(data.res)
    })
  }

  uploadCrop(image) {
    actions.upload.upload({
      image,
      tag: 'crop',
      username: 'animism',
    }).then(data => {
      console.log(data.res)
      this.props.onSelect('url', data.res.url)
    })
  }

  render() {
    const { data } = this.props
    console.log(data)
    return (
      <div className='imageForm'>
        {!data.url &&
          <FileInputField
            title='Upload image'
            onChange={this.handleUpload}
          />
        }
        {data.settings.fullsize &&
          <div>
            <ImageSelection
              url={data.settings.fullsize.url}
              crop={data.settings.crop}
            />
          </div>
        }
      </div>
    )
  }
}