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

import * as actions from '../actions'

import { TableObject } from '../common'

class PaperCitations extends Component {
  componentDidMount() {
    this.props.actions.getVerifications()
  }

  render() {
    const { dataset, citations } = this.props.api.paperInfo
    let { verifications } = this.props.api.verifications
    verifications = verifications || {}
    if (!dataset || !citations) return null
    console.log('rendering citations...')
    // console.log(citations)
    return (
      <div className='citations'>
        <h2>{dataset.name_full}: Citations</h2>
        <ul>
        {citations.map((citation, i) => {
          let cite = { ...citation }
          cite.id = {
            _raw: true,
            value: <Link to={'/paper/' + dataset.key + '/verify/' + citation.id}>{citation.id}</Link>
          }
          cite.pdf = {
            _raw: true,
            value: (cite.pdf && cite.pdf.length) ? <a href={cite.pdf[0]} rel='noopener noreferrer' target="_blank">[pdf]</a> : "no pdf"
          }
          cite.s2 = {
            _raw: true,
            value: <a
            href={'https://www.semanticscholar.org/paper/' + citation.id}
            target="_blank"
            className={'pdfLink'}
          >{'[semantic scholar]'}</a>
          }
          cite.addresses = {
            _raw: true,
            value: cite.addresses.map((address, j) => (
              <div key={j}>{address.name}{', '}<span className='type'>{address.type}</span></div>
            ))
          }
          if (citation.id in verifications) {
            const verification = verifications[citation.id]
            cite.verified = {
              _raw: true,
              value: verification['uses_dataset'] === 'TRUE' ? <span className='verified'>uses dataset</span> : <span className='unverified'>doesn't use dataset</span>
            }
          }
          else {
            cite.verified = {
              _raw: true,
              value: <span className='unknown'>unknown</span>
            }
          }
          return (
            <li key={i}>
              <TableObject
                summary
                object={cite}
                tag={cite.title}
                order={['id', 'pdf', 's2', 'year', 'addresses', 'verified']}
              />
            </li>
          )
        })}
        </ul>
      </div>
    )
  }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(PaperCitations)