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_dataset: false,
  doesnt_use_dataset: true,
  images_in_paper: false,
  verified_by: localStorage.getItem('verify.username') || '',
  reference: '',
  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 { verify } = this.props.api
    const { sha256: oldSha256 } = oldProps.match.params
    const { verify: oldVerify } = oldProps.api
    const oldPaper = oldVerify ? oldVerify.paper : null
    const paper = verify ? verify.paper : null

    if (oldSha256 && sha256 !== oldSha256) {
      console.log('update verification')
      this.props.actions.getVerification(sha256)
      const citationState = this.getCitationState(sha256)
      this.setState({
        ...initialState,
        ...citationState,
      })
    } else if (verify && !verify.loading && verify.paper && (!oldPaper || oldPaper !== verify.paper)) {
      if (paper.error) {
        console.log('USING PAPER VERIFICATION')
        const citationState = this.getCitationState(sha256)
        this.setState({
          ...initialState,
          ...citationState,
        })
      } else {
        // console.log(paper)
        console.log('GOT CUSTOM CITATION STATE', paper)
        const citationState = this.getCitationState(sha256)
        this.setState({
          ...citationState,
          uses_dataset: paper.uses_dataset === "TRUE",
          doesnt_use_dataset: paper.doesnt_use_dataset === "TRUE",
          images_in_paper: paper.images_in_paper === "TRUE",
          verified_by: paper.verified_by,
          reference: paper.reference,
          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)
    let date = new Date()
    let mon = date.getMonth() + 1
    if (mon < 10) mon = "0" + mon
    let day = date.getDate()
    if (day < 10) day = "0" + day
    let time = date.toTimeString().split(" ")[0]
    let dateString = date.getFullYear() + '-' + mon + '-' + day + ' ' + time
    localStorage.setItem('verify.username', this.state.verified_by)
    this.props.actions.postVerification({
      paper_id: this.state.citation.id,
      title: this.state.citation.title,
      dataset: this.props.api.paperInfo.dataset.key,
      uses_dataset: this.state.uses_dataset,
      doesnt_use_dataset: this.state.doesnt_use_dataset,
      images_in_paper: this.state.images_in_paper,
      verified_by: this.state.verified_by,
      reference: this.state.reference,
      notes: this.state.notes,
      date: dateString,
    })
    this.next(false)
  }

  prev() {
    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 < 0) {
        history.push('/paper/' + key + '/info/')
      } else {
        let nextId = paperInfo.citations[citationIndex].id
        history.push('/paper/' + key + '/verify/' + nextId)
      }
    }
  }

  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>
            )
          })}
          {' | '}
          <a
            href={'https://www.semanticscholar.org/paper/' + citation.id}
            target="_blank"
            className={'pdfLink'}
          >
            {'[semantic scholar]'}
          </a>
        </div>

        <div className='param'>
          <label>Uses the dataset?</label>
          <input
            className='vetting'
            type='radio'
            name='uses_dataset'
            checked={!!this.state.uses_dataset}
            onChange={e => this.setState({
              uses_dataset: e.target.checked,
              doesnt_use_dataset: !e.target.checked,
            })}
          />
        </div>

        <div className='param'>
          <label>{"Doesn't use dataset"}</label>
          <input
            className='vetting'
            type='radio'
            name='uses_dataset'
            checked={!!this.state.doesnt_use_dataset}
            onChange={e => this.setState({
              uses_dataset: !e.target.checked,
              doesnt_use_dataset: e.target.checked
            })}
          />
        </div>

        <div className='param'>
          <label>{"Uses images from dataset"}</label>
          <input
            className='vetting'
            type='checkbox'
            name='images_in_paper'
            checked={!!this.state.images_in_paper}
            onChange={e => this.setState({
              images_in_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>Reference</label>
          <textarea
            rows={3}
            cols={50}
            type='text'
            className='notes'
            value={this.state.notes}
            placeholder='Notes'
            onChange={e => this.setState({ notes: e.target.value })}
          />
        </div>

        <div className='param'>
          <label>Notes</label>
          <textarea
            rows={3}
            cols={50}
            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.prev.bind(this)}
          >{'Prev >'}</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)