import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import * as actions from '../actions'

import UploadImage from './uploadImage.component'
class Query extends Component {
  state = {
    image: null,
    blob: null,
    url: "",
    threshold: 20,
  }

  handleUpload(blob) {
    const { image, threshold } = this.state
    if (image) {
      URL.revokeObjectURL(image)
    }
    const url = URL.createObjectURL(blob)
    this.setState({ image: url, blob })
    this.props.actions.upload(blob, threshold)
  }

  handleURL() {
    const { url, threshold } = this.state
    if (!url || url.indexOf('http') !== 0) return
    this.setState({ image: url, blob: null })
    this.props.actions.submit(url, threshold)
  }

  resubmit() {
    const { image, blob } = this.state
    if (blob) {
      this.handleUpload(blob)
    } else {
      this.handleURL()
    }
  }

  render() {
    const { url, image, threshold } = this.state
    const style = {}
    if (image) {
      style.maxWidth = 200
      style.maxHeight = 200
      style.backgroundImage = 'url(' + image + ')'
      style.backgroundSize = 'cover'
      style.opacity = 1
    }
    return (
      <div className='query'>
        <label>
          <span>Query image</span>
          <UploadImage onUpload={this.handleUpload.bind(this)} />
        </label>
      {/*
        <label>
          <span>Add a URL</span>
          <input
            type='text'
            value={url}
            onChange={e => this.setState({ url: e.target.value })}
            onKeyDown={e => e.keyCode === 13 && this.handleURL()}
            placeholder='https://'
          />
        </label>
      */}
        <label>
          <span>Threshold</span>
          <input
            type='number'
            value={threshold}
            min={0}
            max={64}
            step={1}
            onChange={e => this.setState({ threshold: parseInt(e.target.value) }) }
          />
          <input
            type='range'
            value={threshold}
            min={0}
            max={64}
            step={1}
            onChange={e => this.setState({ threshold: parseInt(e.target.value) }) }
          />
          <button onClick={this.resubmit}>Update</button>
        </label>
        {image && <div className='image' style={style} />}
      </div>
    )
  }
}

const mapStateToProps = state => ({
  ...state.api,
})
const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({ ...actions }, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(Query)