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

import { Loader, UploadImage } from '../common'
import * as actions from './faceAnalysis.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 FaceAnalysisQuery extends Component {
  state = {
    image: null
  }

  upload(blob) {
    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" />}
            <UploadImage onUpload={this.upload.bind(this)} />
          </div>
        {result.loading && (
          <div className='loading' style={style}>
            <Loader />
          </div>
        )}
        </div>
        <div className='cta'>
          <h2>Face Analysis</h2>
          <p>
            {'Put yourself under the microscope of various facial recognition algorithms. See what can be determined from a photo.'}
          </p>
          <ol>
            <li>Upload a photo of yourself and be judged by the algorithm</li>
            <li>{'Your search data is only stored for the duration of this analysis and is 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.faceAnalysis.result,
  options: state.faceAnalysis.options,
})

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

export default connect(mapStateToProps, mapDispatchToProps)(FaceAnalysisQuery)