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,
    searchType: 'file',
    thresholdChanged: false,
  }

  handleUpload(blob) {
    const { image, threshold } = this.state
    if (image) {
      URL.revokeObjectURL(image)
    }
    const url = URL.createObjectURL(blob)
    this.setState({ image: url, blob, thresholdChanged: false })
    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, thresholdChanged: false })
    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, thresholdChanged, searchType } = this.state
    const style = {}
    if (image) {
      style.backgroundImage = 'url(' + image + ')'
    }
    return (
      <div className='query'>
        <div>
          <span>Search by</span>
          <label>
            <input
              type='radio'
              name='searchType'
              value='file'
              checked={searchType === 'file'}
              onChange={e => this.setState({ searchType: e.target.value })}
            /> File
          </label>
          <label>
            <input
              type='radio'
              name='searchType'
              value='url'
              checked={searchType === 'url'}
              onChange={e => this.setState({ searchType: e.target.value })}
            /> URL
          </label>
        </div>
        {searchType === 'file'
          ? <label>
              <span>Upload image</span>
              <UploadImage onUpload={this.handleUpload.bind(this)} />
            </label>
          : <label>
              <span>Fetch 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='range'
            value={threshold}
            min={0}
            max={64}
            step={1}
            onChange={e => this.setState({ threshold: parseInt(e.target.value), thresholdChanged: true }) }
          />
          <input
            type='number'
            value={threshold}
            min={0}
            max={64}
            step={1}
            onChange={e => this.setState({ threshold: parseInt(e.target.value), thresholdChanged: true }) }
          />
          {thresholdChanged && <button onClick={this.resubmit.bind(this)}>Update</button>}
        </label>
        {image &&
          <div className='activeQuery'>
            <b>Query image</b>
            <div className='image' style={style} />
          </div>
        }
      </div>
    )
  }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(Query)