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,
  uses_paper: false,
  doesnt_use_paper: false,
  verified_by: '',
  notes: '',
  pdf_index: 0,
}
class PaperVerify extends Component {
  state = {
    ...initialState
  }

  componentDidMount() {
    const { sha256 } = this.props.match.params
    this.props.actions.getInstitutions()
    this.props.actions.getVerification(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.getVerification(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 CITATION STATE')
        const citationState = this.getCitationState(sha256)
        this.setState({
          ...citationState,
          uses_paper: paper.uses_paper,
          doesnt_use_paper: paper.doesnt_use_paper,
          verified_by: paper.verified_by,
          notes: paper.notes,
        })
      }
    } 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 }
    return state
  }

  save() {
    console.log(this.state)
    this.props.actions.postVerification({
      paper_id: this.state.citation.id,
      title: this.state.citation.title,
      uses_paper: this.state.uses_paper,
      doesnt_use_paper: this.state.doesnt_use_paper,
      verified_by: this.state.verified_by,
      notes: this.state.notes,
    })
    this.next(false)
  }

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

  render() {
    let { paperInfo } = this.props.api
    if (paperInfo.loading) return <Loader />
    // console.log(this.state)
    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'>
          <label>Uses the paper?</label>
          <input
            className='vetting'
            type='checkbox'
            checked={!!this.state.uses_paper}
            onChange={e => this.setState({ uses_paper: e.target.checked })}
          />
        </div>

        <div className='param'>
          <label>{"Doesn't use paper"}</label>
          <input
            className='vetting'
            type='checkbox'
            checked={!!this.state.doesnt_use_paper}
            onChange={e => this.setState({ doesnt_use_paper: e.target.checked })}
          />
        </div>

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

        <div className='param'>
          <label>Notes</label>
          <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 Verification</button>

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

         <iframe className='pdfViewer' referrerPolicy='no-referrer' 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)(PaperVerify)