import React, { Component } from 'react'
import { ReactTabulator } from 'react-tabulator'
import { saveAs } from 'file-saver'

import { Loader } from '../common'
import { domainFromUrl } 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 {
  state = {
    q: '',
    formattedCitations: [],
    filteredCitations: [],
  }

  componentDidMount() {
    this.updateCitations()
  }

  componentDidUpdate(oldProps) {
    if (this.props.payload.data.citations !== oldProps.payload.data.citations) {
      this.updateCitations()
    }
  }

  updateCitations() {
    const { paper, citations } = this.props.payload.data
    if (!citations.length) this.setState({ formattedCitations: [] })
      // console.log(citations.filter(a => a.title.match('Coarse')))
    const formattedCitations = citations.sort((a,b) => a.title.localeCompare(b.title)).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 = domainFromUrl(pdf_link)
      return {
        title: citation.title,
        institution: citation.addresses.map(a => a.name).sort().join('; '),
        country: Array.from(new Set(citation.addresses.map(a => a.country))).sort().join('; '),
        year: citation.year,
        pdf_link, pdf_text,
      }
    })
    this.setState({
      formattedCitations,
      filteredCitations: formattedCitations,
    })
  }

  updateFilter(q) {
    const { formattedCitations } = this.state
    if (!q.length) {
      this.setState({ q, filteredCitations: formattedCitations })
    } else {
      let qRe = new RegExp('(' + q.replace(/\s+/g, ' ').trim().replace(' ', '|') + ')', 'gi')
      let filteredCitations = formattedCitations.filter(citation => (
        citation.title.match(qRe) ||
        citation.institution.match(qRe) ||
        citation.country.match(qRe)
      ))
      this.setState({ q, filteredCitations })
    }
  }

  download() {
    const { formattedCitations } = this.state
    const fn = this.props.payload.data.paper.key + '.csv'
    const titles = citationsColumns.map(c => c.title)
    const fields = citationsColumns.map(c => c.formatterParams ? c.formatterParams.urlField : c.field)
    const rows = formattedCitations.map(citation => {
      const row = fields.map(field => citation[field]).map(data => {
        switch (typeof data) {
          case 'number':
            return String(data)
          default:
            return '"' + String(data) + '"'
        }
      })
      return row.join(",")
    })

    const blob = new Blob([
      [
        titles.join(','),
        ...rows,
      ].join('\n')
    ], { type: "text/csv;charset=utf-8" })
    saveAs(blob, fn)
  }

  render() {
    const { formattedCitations, filteredCitations } = this.state
    if (!formattedCitations.length) return <Loader />
    return (
      <div className='citationBrowser'>
        <div className='citationHeader'>
          <input
            type="text"
            value={this.state.q}
            onChange={e => this.updateFilter(e.target.value)}
            className='q'
            placeholder='Enter text to search citations'
          />
          <span className='download' onClick={() => this.download()}>Download CSV</span>
        </div>
        <ReactTabulator
          columns={citationsColumns}
          data={filteredCitations}
          options={{
            // height: Math.max(104, Math.min(30 * formattedCitations.length + 30, 1000)),
            layout: 'fitColumns',
            placeholder: formattedCitations.length ? '' : 'Nothing matches your query',
          }}
        />
      </div>
    )
  }
}

export default CitationsTable