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

import * as actions from './faceSearch.actions'

const errors = {
  'bbox': "Sorry, we couldn't find a face in that image.  Please choose an image where the face is large and clear.",
  'nomatch': "We didn't find a match.",
  'default': "There was an error!",
}

class FaceSearchResult extends Component {
  render() {
    const { dataset } = this.props.payload
    const { distances, results, error } = this.props.result
    if (error) {
      let errorMessage = errors[error.message] || errors.default
      return (
        <div className='result'>{errorMessage}</div>
      )
    }
    if (!results) {
      return (
        <div className='result'></div>
      )
    }
    if (!this.props.result.results.length) {
      return (
        <div className='result'>No results</div>
      )
    }
    const els = results.map((result, i) => {
      const distance = distances[i]
      const { uuid } = result.uuid
      const { fullname, gender, description, images } = result.identity
      return (
        <div>
          <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
          {fullname} {'('}{gender}{')'}<br/>
          {description}<br/>
          {courtesyS(images, 'image')}<br />
          {distance}
        </div>
      )
    })

    return (
      <div className='result'>
        <div class='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)