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

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 { result, timing } = this.props
    const { data, error, loading, message } = result
    let { step, total } = data || {}
    // console.log(step, total)
    if (loading) {
      return (
        <div className='result'>
          <div>
            <Loader /><br />
            <h2>Uploading...</h2>
          </div>
        </div>
      )
    }
    if (error) {
      // console.log(error)
      let errorMessage = errors[error] || errors.error
      return (
        <div className='result'>{errorMessage}</div>
      )
    }
    // console.log(result)
    if (!total) {
      return (
        <div className='result'></div>
      )
    }

    // console.log(data.data)
    const results = [
      'blur_fn', 'points_3d_68', 'landmarks_3d_68', 'landmarks_2d_68', 'pose',
    ].map(tag => {
      if (tag in data.data) {
        const { title, url } = data.data[tag]
        return (
          <div key={tag}>
            <img src={url} />
            <span>{title}</span>
          </div>
        )        
      }
      return null
    }).filter(a => a)

    const statisticsLabels = ['Age (Real)', 'Age (Apparent)', 'Gender', 'Beauty score', 'Emotion']
    const statistics = [
      'age_real', 'age_apparent', 'gender', 'beauty', 'emotion'
    ].map((tag, i) => {
      if (tag in data.data.statistics) {
        return (
          <tr key={tag}>
            <td>
              {statisticsLabels[i]}
            </td>
            <td>
              {data.data.statistics[tag]}
            </td>
          </tr>
        )
      }
      return null
    }).filter(a => a)

    return (
      <div>
        <div className='results'>
          {results}
        </div>
        {!!statistics.length && (
          <table>
            {statistics}
          </table>
        )}
        <div className="about">
          <small>Step {step} / {total} {message}</small><br />
          <small>Query {step === total ? 'took' : 'timer:'} {(timing / 1000).toFixed(2)} s.</small>
        </div>
      </div>
    )
  }
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(FaceAnalysisResult)