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

import * as actions from '../actions'

import { history } from '../store'

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: '',
  notes: '',
  pdf_index: 0,
}
class PaperAddress extends Component {
  state = {
    ...initialState
  }

  componentDidMount() {
    const { sha256 } = this.props.match.params
    this.props.actions.getAddress(sha256)
    const citationState = this.getCitationState(sha256)
    console.log('DID MOUNT')
    this.setState(citationState)
  }

  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 citationState = this.getCitationState(sha256)
      this.setState({
        ...initialState,
        ...citationState,
      })
    } else if (address && !address.loading && address.paper && (!oldPaper || oldPaper !== address.paper)) {
      if (paper.error) {
        console.log('USING PAPER ADDRESS')
        const citationState = this.getCitationState(sha256)
        this.setState({
          ...initialState,
          ...citationState,
        })
      } else {
        // console.log(paper)
        console.log('GOT CUSTOM ADDRESS')
        const citationState = this.getCitationState(sha256)
        this.setState({
          ...citationState,
          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 citationState = this.getCitationState(sha256)
      this.setState(citationState)
    }
  }

  getCitationState(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)
    let state = { citation }
    let addresses = citation ? citation.addresses : []
    if (addresses) {
      addresses.forEach((address, i) => {
        state['institution_' + (i + 1)] = address.address
      })
    }
    return state
  }

  save() {
    console.log(this.state)
    this.props.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,
      notes: this.state.notes,
    })
    this.next(false)
  }

  next() {
    const { key } = this.props.api.paperInfo.dataset
    const { unknownCitations } = this.props.api
    let citationIndex = (unknownCitations.citations || [])
      .findIndex(f => f.id === this.state.citation.id)
    if (citationIndex === -1) {
      history.push('/paper/' + key + '/info/')
    } else {
      citationIndex += 1
      if (citationIndex >= unknownCitations.length) {
        history.push('/paper/' + key + '/info/')
      } else {
        let nextId = unknownCitations.citations[citationIndex].id
        history.push('/paper/' + key + '/address/' + nextId)
      }
    }
  }

  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>
    }
    console.log(citation)
    return (
      <div className='form'>
        <h3>{citation.title}</h3>
        <div className='gray'>
          {citation.id}
          {' | PDFs: '}
          {citation.pdf.map((pdf,i) => {
            const domain = pdf.replace('www.','').split('/').slice(2,3)[0] || 'unknown'
            return (
              <a
                key={i}
                onClick={() => this.setState({ pdf_index: i })}
                className={i === this.state.pdf_index ? 'selected pdfLink' : 'pdfLink'}
              >
                {'[' + domain + '] '}
              </a>
            )
          })}
        </div>

        <div className='param'>
          <input
            autoFocus
            className='vetting'
            type='text'
            value={this.state.institution_1_vetting}
            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}
            onSelect={value => {
              this.setState({ institution_1: value })
              // this.institution_2._el.focus()
            }}
            onCancel={value => {
              this.setState({ institution_1: '' })
            }}
            ref={ref => this.institution_1 = ref}
          />
        </div>

        <div className='param'>
          <input
            className='vetting'
            type='text'
            placeholder='Paste Institution #2'
            value={this.state.institution_2_vetting}
            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 })
            }}
            onCancel={value => {
              this.setState({ institution_2: '' })
            }}
            ref={ref => this.institution_2 = ref}
          />
        </div>

        <div className='param'>
          <input
            className='vetting'
            type='text'
            placeholder='Paste Institution #3'
            value={this.state.institution_3_vetting}
            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()
            }}
            onCancel={value => {
              this.setState({ institution_3: '' })
            }}
            ref={ref => this.institution_3 = ref}
          />
        </div>

        <div className='param'>
          <input
            className='vetting'
            type='text'
            placeholder='Paste Institution #4'
            value={this.state.institution_4_vetting}
            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 })
            }}
            onCancel={value => {
              this.setState({ institution_4: '' })
            }}
            ref={ref => this.institution_4 = ref}
          />
        </div>

        <div className='param'>
          <input
            type='text'
            className='notes'
            value={this.state.notes}
            placeholder='Notes'
            onChange={e => this.setState({ notes: e.target.value })}
          />
        </div>

        <div className='param'>
          <button
            className='btn btn-primary'
            onClick={this.save.bind(this)}
            ref={ref => this.button = ref}
          >Save Institutions</button>

          <button
            className='btn'
            onClick={this.next.bind(this)}
          >{'Next >'}</button>
        </div>

         <iframe className='pdfViewer' src={citation.pdf[this.state.pdf_index]} />
      </div>
    )
  }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(PaperAddress)