import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { courtesyS } from '../util'

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

const errors = {
  bbox: (
    <div>
      <h2>No face found</h2>
      {"Sorry, we didn't detect a face in that image. "}
      {"Please choose an image where the face is large and clear."}
    </div>
  ),
  nomatch: (
    <div>
      <h2>{"You're clear"}</h2>
      {"No images in this dataset match your face.  We show only matches above 70% probability."}
    </div>
  ),
  error: (
    <div>
      <h2>{"No matches found"}</h2>
      {"Sorry, an error occured."}
    </div>
  ),
  bad_dataset: (
    <div>
      <h2>{""}</h2>
      {""}
    </div>
  ),
  not_an_image: (
    <div>
      <h2>{"Not an image"}</h2>
      {"Sorry, the file you uploaded was not recognized as an image. Please upload a JPG or PNG image and try again."}
    </div>
  ),
}

class FaceSearchResult extends Component {
  render() {
    const { dataset } = this.props.payload
    const { query, distances, results, loading, error } = this.props.result
    console.log(this.props.result)
    if (loading) {
      return (
        <div className='result'>
          <div>
            <h2>Searching...</h2>
          </div>
        </div>
      )
    }
    if (error) {
      // console.log(error)
      let errorMessage = errors[error] || errors.error
      return (
        <div className='result'>{errorMessage}</div>
      )
    }
    if (!results) {
      return <div className='result'></div>
    }
    if (!results.length) {
      return (
        <div className='result'>{errors.nomatch}</div>
      )
    }
    const els = results.map((result, i) => {
      const distance = distances[i]
      const { uuid } = result.file_record
      const { x, y, w, h } = result.face_roi
      const { fullname, gender, description, images } = result.identity
      const bbox = {
        left: (100 * x) + '%',
        top: (100 * y) + '%',
        width: (100 * w) + '%',
        height: (100 * h) + '%',
      }
      // console.log(bbox)
      return (
        <div key={i}>
          <div className='img'>
            <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
            <div className='bbox' style={bbox} />
          </div>
          {fullname} {'('}{gender}{')'}<br/>
          {description}<br/>
          {courtesyS(images, 'image')}{' in dataset'}<br />
          {Math.round((1 - distance) * 100)}{'% match'}
        </div>
      )
    })

    return (
      <div className='result'>
        <div className="about">
          <h2>Did we find you?</h2>
          {'These faces matched images in the '}
          <b><tt>{dataset}</tt></b>
          {' dataset with over 70% probability.'}
          <br />
          <small>Query took {query.timing.toFixed(2)} seconds</small>
        </div>
        <div className='results'>
          {els}
        </div>
      </div>
    )
  }
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(FaceSearchResult)