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

import * as actions from '../actions'

import { TableObject } from '../common'

class PaperInfo extends Component {
  render() {
    const { paperInfo, unknownCitations } = this.props.api
    const { dataset, paper, address } = paperInfo
    if (!dataset) return null
    return (
      <div className='paperInfo'>
        <h2>{dataset.name_full}</h2>
        <TableObject summary
          tag="Dataset"
          object={dataset}
          order={'key name_full purpose comment created_by funded_by funded_by_short license'.split(' ')}
        />
        <TableObject summary
          tag="Paper"
          object={paper}
          order={"paper_id title year doi address".split(" ")}
        />
        <TableObject summary
          tag="Statistics"
          object={dataset}
          order={['year_published', 'purpose_short',
            'wild', 'indoor', 'outdoor', 'cyberspace',
            'names', 'downloaded',
            'year_published', 'year_start', 'year_end', 'ongoing', 'images', 'videos',
            'faces_unique', 'total_faces', 'img_per_person', 'num_cameras', 'faces_persons', 'female', 'male',
            'landmarks', 'width', 'height',
            'comment',
          ]}
        />
        <TableObject
          tag="Address"
          object={address}
          order={['address', 'type', 'lat', 'lng']}
        />
        <TableObject summary
          tag="Citations"
          object={{
            'geocoded': paperInfo.citations.length,
            'unknown': unknownCitations.citations ? unknownCitations.citations.length : 'Loading',
          }}
        />
      </div>
    )
  }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(PaperInfo)