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, Loader } from '../common'
import { USES_DATASET } from '../types'

class CitationList extends Component {
  state = {
    filter: USES_DATASET.YES,
  }

  render() {
    const { citations, title, api } = this.props
    const { paperInfo, unknownCitations, verifications, sortedCitations } = api
    const { dataset } = paperInfo
    const { filter } = this.state
    if (!dataset || !citations || !verifications[dataset.key]) return <Loader />
    let verifiedLookup = verifications[dataset.key] || {}
    let filteredCitations = sortedCitations.filter(citation => (
      citation.verified === filter
    ))
    return (
      <div className='citations'>
        <h2>{title}</h2>
        <div className='filter_buttons'>
          <span className='verified' onClick={() => this.setState({ filter: USES_DATASET.YES })}>uses dataset</span>
          <span className='unverified' onClick={() => this.setState({ filter: USES_DATASET.NO })}>{"doesn't use dataset"}</span>
          <span className='not_enough_info' onClick={() => this.setState({ filter: USES_DATASET.UNKNOWN })}>{'not enough information'}</span>
          <span className='unknown' onClick={() => this.setState({ filter: USES_DATASET.NO_DATA })}>{'unverified'}</span>
        </div>
        <ul>
        {(filteredCitations || []).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)
            ? cite.pdf.map((pdf, i) => <a key={'pdf_' + i} href={pdf} rel='noopener noreferrer' target="_blank">[pdf]</a>)
            : "no pdf"
          }
          cite.doi = {
            _raw: true,
            value: (cite.doi && cite.doi.length)
            ? (cite.doi || []).map((doi, i) => <a key={'doi_' + i} href={doi} rel='noopener noreferrer' target="_blank">[doi]</a>)
            : ""
          }
          cite.s2 = {
            _raw: true,
            value: <a
              href={'https://www.semanticscholar.org/paper/' + citation.id}
              target="_blank"
              rel="noopener noreferrer"
              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 verifiedLookup) {
            const verification = verifiedLookup[citation.id]
            cite.verified = {
              _raw: true,
              value: verification.uses_dataset === USES_DATASET.YES
                ? <span className='verified'>uses dataset</span>
                : verification.uses_dataset === USES_DATASET.NO
                  ? <span className='unverified'>{"doesn't use dataset"}</span>
                  : <span className='not_enough_info'>{"not enough information"}</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)(CitationList)