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

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

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

  upload(e) {
    const { payload } = this.props
    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
    let i
    let file
    for (i = 0; i < files.length; i++) {
      file = files[i]
      if (file && file.type.match('image.*')) break
    }
    if (!file) return
    var fr = new FileReader();
    fr.onload = () => {
      fr.onload = null
      this.setState({ image: fr.result })
    }
    fr.readAsDataURL(files[0]);
    this.props.actions.upload(this.props.payload, file)
  }

  render() {
    const { result } = this.props
    const { image } = this.state
    const style = {}
    if (image) {
      style.backgroundImage = 'url(' + image + ')'
      style.backgroundSize = 'cover'
    }
    return (
      <div className='query row'>
        <div className='uploadContainer'>
        {result.loading ?
          <div className='loading' style={style}>
            <Loader />
          </div>
         :
          <div style={style}>
            <img src="/assets/img/icon_camera.svg" />
            <input
              type="file"
              name="img"
              accept="image/*"
              onChange={this.upload.bind(this)}
              required
            />
          </div>
        }
        </div>
        <div class='cta'>
          <h2>Search This Dataset</h2>
          <h3>Searching {13456} 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)