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

import * as actions from '../actions'

import { Loader, Autocomplete } from '../common'

const initialState = {
  citation: null,
  institution_1: '',
  institution_2: '',
  institution_3: '',
  institution_4: '',
}
class PaperAddress extends Component {
  state = {
    ...initialState
  }

  componentDidMount() {
    const { sha256 } = this.props.match.params
    this.props.actions.getAddress(sha256)
    const citation = this.getCitation(sha256)
    this.setState({ citation })
  }

  componentDidUpdate(oldProps) {
    const { sha256 } = this.props.match.params
    const { address } = this.props.api
    const { sha256: oldSha256 } = oldProps.match.params
    const { address: oldAddress } = oldProps.api
    const oldPaper = oldAddress ? oldAddress.paper : null
    const paper = address ? address.paper : null

    if (oldSha256 && sha256 !== oldSha256) {
      console.log('update address')
      this.props.actions.getAddress(sha256)
      const citation = this.getCitation(sha256)
      this.setState({
        ...initialState,
        citation
      })
    } else if (address && !address.loading && address.paper && (!oldPaper || oldPaper !== address.paper)) {
      if (paper.error) {
        const citation = this.getCitation(sha256)
        this.setState({
          ...initialState,
          citation,
        })
      } else {
        console.log(paper)
        const citation = this.getCitation(sha256)
        this.setState({
          citation,
          institution_1: paper['Institution #1'],
          institution_2: paper['Institution #2'],
          institution_3: paper['Institution #3'],
          institution_4: paper['Institution #4'],
        })
      }
    } else if (oldProps.api.unknownCitations !== this.props.api.unknownCitations) {
      const citation = this.getCitation(sha256)
      this.setState({ citation })
    }
  }

  getCitation(sha256) {
    const { paperInfo, unknownCitations } = this.props.api
    let citation = (unknownCitations.citations || []).find(f => f.id === sha256)
    if (!citation) {
      citation = (paperInfo.citations || []).find(f => f.id === sha256)
    }
    console.log(sha256, citation)
    return citation
  }

  render() {
    // if (!this.props.match.params.key) return null
    // if (this.props.api.address.loading) return <Loader />
    // if (!this.props.api.paperInfo.dataset) return <div className='paperInfo'>Metadata not found</div>
    let { paperInfo, unknownCitations } = this.props.api
    if (paperInfo.loading || unknownCitations.loading) return <Loader />
    console.log(this.state)
    const { citation } = this.state
    if (!citation) {
      return <div>Citation not found in this paper</div>
    }
    return (
      <div className='form'>
        <h3>{citation.title}</h3>
        <div className='gray'>{citation.id}</div>
        {this.state.institution_1}
        {/*
          <iframe className='pdfViewer' src={citation.pdf} />
        */}
      </div>
    )
  }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(PaperAddress)