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

import * as actions from './faceAnalysis.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>
  ),
  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 FaceAnalysisResult extends Component {
  render() {
    const { query, task, result, loading, error } = this.props.result
    console.log(this.props.result)
    if (loading) {
      return (
        <div className='result'>
          <div>
            <Loader /><br />
            <h2>Uploading...</h2>
          </div>
        </div>
      )
    }
    console.log(task, result)
    if (error) {
      // console.log(error)
      let errorMessage = errors[error] || errors.error
      return (
        <div className='result'>{errorMessage}</div>
      )
    }
    if (!task && !result) return

    return (
      <div className='result'>
        <div className="about">
          <small>Query took {query.timing.toFixed(2)} seconds</small>
        </div>
      </div>
    )
  }
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(FaceAnalysisResult)