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: '',
  institution_1_vetting: '',
  institution_2_vetting: '',
  institution_3_vetting: '',
  institution_4_vetting: '',
}
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,
          institution_1_vetting: paper.institution_1_vetting,
          institution_2_vetting: paper.institution_2_vetting,
          institution_3_vetting: paper.institution_3_vetting,
          institution_4_vetting: paper.institution_4_vetting,
        })
      }
    } 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
  }

  save() {
    console.log(this.state)
    this.actions.postAddress({
      paper_id: this.state.citation.id,
      title: this.state.citation.title,
      institution_1: this.state.institution_1,
      institution_2: this.state.institution_2,
      institution_3: this.state.institution_3,
      institution_4: this.state.institution_4,
      institution_1_vetting: this.state.institution_1_vetting,
      institution_2_vetting: this.state.institution_2_vetting,
      institution_3_vetting: this.state.institution_3_vetting,
      institution_4_vetting: this.state.institution_4_vetting,
    })
  }

  render() {
    let { institutions, paperInfo, unknownCitations } = this.props.api
    if (institutions.loading || paperInfo.loading || unknownCitations.loading) return <Loader />
    console.log(this.state)
    console.log(institutions)
    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>

        <div className='param'>
          <input
            autoFocus
            className='vetting'
            type='text'
            placeholder='Paste Institution #1'
            onChange={e => this.setState({
              institution_1_vetting: e.target.value,
            })}
          />
          <Autocomplete
            autoFocus={false}
            placeholder='Institution #1'
            value={this.state.institution_1}
            vetting={this.state.institution_1_vetting}
            onSelect={value => {
              this.setState({ institution_1: value })
              // this.institution_2._el.focus()
            }}
            ref={ref => this.institution_1 = ref}
          />
        </div>

        <div className='param'>
          <input
            className='vetting'
            type='text'
            placeholder='Paste Institution #2'
            onChange={e => this.setState({
              institution_2_vetting: e.target.value,
            })}
          />
          <Autocomplete
            placeholder='Institution #2'
            value={this.state.institution_2}
            onSelect={value => {
              this.setState({ institution_2: value })
            }}
            ref={ref => this.institution_2 = ref}
          />
        </div>

        <div className='param'>
          <input
            className='vetting'
            type='text'
            placeholder='Paste Institution #3'
            onChange={e => this.setState({
              institution_3_vetting: e.target.value,
            })}
          />
          <Autocomplete
            placeholder='Institution #3'
            value={this.state.institution_3}
            onSelect={value => {
              this.setState({ institution_3: value })
              // this.institution_4._el.focus()
            }}
            ref={ref => this.institution_3 = ref}
          />
        </div>

        <div className='param'>
          <input
            className='vetting'
            type='text'
            placeholder='Paste Institution #4'
            onChange={e => this.setState({
              institution_4_vetting: e.target.value,
            })}
          />
          <Autocomplete
            placeholder='Institution #4'
            value={this.state.institution_4}
            onSelect={value => {
              this.setState({ institution_4: value })
              this.button.focus()
            }}
            ref={ref => this.institution_4 = ref}
          />
        </div>

        <button
          className='btn btn-primary'
          onClick={this.save.bind(this)}
          ref={ref => this.button = ref}
        >Save Institutions</button>
        <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)