import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { ReactTabulator } from 'react-tabulator'
import { Loader } from '../common'
import { toArray, toTuples } from '../util'

export const citationsColumns = [
  { title: 'Title', field: 'title', sorter: 'string' },
  { title: 'Institution', field: 'institution', sorter: 'string' },
  { title: 'Country', field: 'country', sorter: 'string', width: 140 },
  { title: 'Year', field: 'year', sorter: 'number', width: 70 },
  { title: 'PDF', field: 'pdf_text', formatter: 'link',
    formatterParams: { target: "_blank", urlField: 'pdf_link', },
    sorter: 'string', width: 100 },
]

class CitationsTable extends Component {
  render() {
    const { payload } = this.props
    const { paper, citations } = payload.data

    if (!citations.length) return <Loader />

    const formattedCitations = citations.map(citation => {
      const pdf_link = (citation.pdf && citation.pdf.length)
          ? citation.pdf[0]
          : (citation.doi && citation.doi.length)
            ? citation.doi[0]
            : 'https://www.semanticscholar.org/paper/' + citation.id
      let pdf_text
      const pdf_partz = pdf_link.split('/')[2].split('.')
      if (pdf_partz.length > 2 && pdf_partz[pdf_partz.length - 2].length == 2) {
        pdf_text = pdf_partz.slice(-3).join('.')
      } else {
        pdf_text = pdf_partz.slice(-2).join('.')
      }
      return {
        title: citation.title,
        institution: citation.addresses[0].name,
        country: citation.addresses[0].country,
        year: citation.year,
        pdf_link, pdf_text,
      }
    })

    // console.log(formattedCitations)

    return (
      <ReactTabulator
        columns={citationsColumns}
        data={formattedCitations}
        options={{
          height: 311,
          layout: 'fitColumns',
          placeholder: 'No Data Set',
        }}
      />
    )
  }
}

export default CitationsTable