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

import { Loader, UploadImage } from '../common'
import * as actions from './faceSearch.actions'

// function parse_bbox(s) {
//   // "BBox: (77,86), (166, 177), width:89, height:91"
//   try {
//     const [x, y, w, h, width, height] = s.replace(/\D/g, ' ').replace(/\s+/g, ' ').trim().split(' ')
//     return { x, y, w, h }
//   }
// }

class FaceSearchQuery extends Component {
  state = {
    image: null
  }

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

  render() {
    const { result } = this.props
    const { image } = this.state
    console.log(result)
    const style = {}
    if (image) {
      style.backgroundImage = 'url(' + image + ')'
      style.backgroundSize = 'cover'
      style.opacity = 1
    }
    return (
      <div className='query row'>
        <div className='uploadContainer'>
          <div style={style}>
            {image ? null : <img src="/assets/img/icon_camera.svg" />}
            {result.loading && (
              <div className='loading' style={style}>
                <Loader />
              </div>
            )}
            <UploadImage onUpload={this.upload.bind(this)} />
          </div>
        </div>
        <div className='cta'>
          <h2>Search by Image</h2>
          <h3>Searching {13233} images</h3>
          <p>
            {'Use facial recognition to reverse search into the LFW dataset '}
            {'and see if it contains your photos.'}
          </p>
          <ol>
            <li>Upload a photo of yourself</li>
            <li>Use a photo similar to examples below</li>
            <li>Only matches over 85% will be displayed</li>
            <li>Read more tips to improve search results</li>
            <li>{'Your search data is never stored and immediately cleared '}
            {'once you leave this page.'}</li>
          </ol>
          <p>
            Read more about <a href='/about/privacy/'>privacy</a>.
          </p>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  result: state.faceSearch.result,
  options: state.faceSearch.options,
})

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

export default connect(mapStateToProps, mapDispatchToProps)(FaceSearchQuery)