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

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

const errors = {
  nomatch: (
    <div>
      <h3>Name not found</h3>
      {"No names matched your query."}
    </div>
  ),
  error: (
    <div>
      <h3>{"No matches found"}</h3>
    </div>
  ),
}

class NameSearchResult extends Component {
  render() {
    const { dataset } = this.props.payload
    const { query, results, loading, error } = this.props.result
    console.log(this.props.result)
    if (loading) {
      return (
        <div className='result'>
          <div>
            <Loader />
          </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 { uuid } = result.uuid
      const { fullname, gender, description, images } = result.identity
      return (
        <div key={i}>
          <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
          {fullname} {'('}{gender}{')'}<br/>
          {description}<br/>
          {courtesyS(images, 'image')}{' in dataset'}<br />
        </div>
      )
    })

    return (
      <div className='result'>
        <div className="timing">
          {'Search took '}{Math.round(query.timing * 1000) + ' ms'}
        </div>
        <div className='results'>
          {els}
        </div>
      </div>
    )
  }
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(NameSearchResult)