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'
import { USES_DATASET } from '../types'

const initialState = {
  citation: null,
  address: {},
  uses_dataset: USES_DATASET.UNKNOWN,
  images_in_paper: "FALSE",
  used_as_model: "FALSE",
  verified_by: localStorage.getItem('verify.username') || '',
  reference: '',
  notes: '',
  location: '',
  pdf_index: 0,
  isUnknown: false,
  institution_1: '',
  institution_2: '',
  institution_3: '',
  validate_1: false,
  validate_2: false,
  validate_3: false,
}

class PaperVerify extends Component {
  state = {
    ...initialState
  }

  componentDidMount() {
    const { sha256 } = this.props.match.params
    this.props.actions.getInstitutions()
    this.props.actions.getAddress(sha256)
    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, verify } = this.props.api
    const { sha256: oldSha256 } = oldProps.match.params
    const { verify: oldVerify, address: oldAddress } = oldProps.api
    const oldPaper = oldVerify ? oldVerify.paper : null
    const paper = verify ? verify.paper : null
    let newState = {}

    if (oldSha256 && sha256 !== oldSha256) {
      console.log('update verification')
      this.props.actions.getAddress(sha256)
      this.props.actions.getVerification(sha256)
      const citationState = this.getCitationState(sha256)
      newState = {
        ...initialState,
        ...citationState,
        ...address.paper,
      }
      this.setState(newState)
    } else if (verify && !verify.loading && verify.paper && (!oldPaper || oldPaper !== verify.paper)) {
      if (paper.error) {
        console.log('USING PAPER VERIFICATION')
        const citationState = this.getCitationState(sha256)
        newState = {
          ...initialState,
          ...citationState,
          ...address.paper,
        }
        this.setState(newState)
      } else {
        // console.log(paper)
        console.log('GOT CUSTOM CITATION STATE', paper)
        const citationState = this.getCitationState(sha256)
        newState = {
          ...citationState,
          ...address.paper,
          uses_dataset: paper.uses_dataset,
          images_in_paper: paper.images_in_paper,
          verified_by: paper.verified_by,
          reference: paper.reference,
          notes: paper.notes,
        }
        this.setState(newState)
      }
    } else if (oldProps.api.unknownCitations !== this.props.api.unknownCitations) {
      console.log('loaded unknown citations')
      const citationState = this.getCitationState(sha256)
      newState = citationState
      this.setState(newState)
    }
  }

  getCitationState(sha256) {
    const { paperInfo, unknownCitations } = this.props.api
    let citation = (unknownCitations.citations || []).find(f => f.id === sha256)
    if (citation) {
      citation.isUnknown = true
    } else {
      citation = (paperInfo.citations || []).find(f => f.id === sha256)
      if (citation) {
        citation.isUnknown = false
      }
    }
    // 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,
      images_in_paper: this.state.images_in_paper,
      used_as_model: this.state.used_as_model,
      verified_by: this.state.verified_by,
      reference: this.state.reference,
      notes: this.state.notes,
      date: dateString,
      isUnknown: this.state.citation.isUnknown,
      institution_1: this.state.institution_1,
      validate_1: this.state.validate_1,
      institution_2: this.state.institution_2,
      validate_2: this.state.validate_2,
      institution_3: this.state.institution_3,
      validate_3: this.state.validate_3,
    })
    this.next()
  }

  prev() {
    const { key } = this.props.api.paperInfo.dataset
    const { paperInfo, sortedCitations } = this.props.api
    const citations = sortedCitations || paperInfo.citations || []
    let citationIndex = 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 = citations[citationIndex].id
        history.push('/paper/' + key + '/verify/' + nextId)
      }
    }
  }

  next() {
    const { key } = this.props.api.paperInfo.dataset
    const { paperInfo, sortedCitations } = this.props.api
    const citations = sortedCitations || paperInfo.citations || []
    let citationIndex = citations.findIndex(f => f.id === this.state.citation.id)

    if (citationIndex === -1) {
      history.push('/paper/' + key + '/info/')
    } else {
      citationIndex += 1
      if (citationIndex >= citations.length) {
        history.push('/paper/' + key + '/info/')
      } else {
        let nextId = citations[citationIndex].id
        history.push('/paper/' + key + '/verify/' + nextId)
      }
    }
  }

  render() {
    const { paperInfo, unknownCitations } = 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}
                href={pdf}
                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>

        {this.renderLocationForm()}

        <div className='row vettingRow'>
          <div className='rowHeading'>
            {'Uses dataset'}
          </div>
          <label>
            <input
              className='vetting'
              type='radio'
              name='uses_dataset'
              checked={String(this.state.uses_dataset) === USES_DATASET.YES}
              onChange={e => this.setState({
                uses_dataset: USES_DATASET.YES,
              })}
            />
            <div>{"Yes"}</div>
          </label>

          <label>
            <input
              className='vetting'
              type='radio'
              name='uses_dataset'
              checked={String(this.state.uses_dataset) === USES_DATASET.NO}
              onChange={e => this.setState({
                uses_dataset: USES_DATASET.NO,
              })}
            />
            <div>{"No"}</div>
          </label>

          <label>
            <input
              className='vetting'
              type='radio'
              name='uses_dataset'
              checked={String(this.state.uses_dataset) !== USES_DATASET.YES && String(this.state.uses_dataset) !== USES_DATASET.NO}
              onChange={e => this.setState({
                uses_dataset: USES_DATASET.UNKNOWN,
              })}
            />
            <div>{"Not enough information"}</div>
          </label>
        </div>

        <div
          className={String(this.state.uses_dataset) === USES_DATASET.YES ? 'row vettingRow' : 'row vettingRow disabled'}
          disabled={String(this.state.uses_dataset) === USES_DATASET.YES ? false : true}
        >
          <div className='rowHeading'>
            {'Paper shows images'}
          </div>

          <label>
            <input
              className='vetting'
              type='radio'
              name='images_in_paper'
              checked={this.state.images_in_paper === "TRUE"}
              onChange={e => this.setState({
                images_in_paper: "TRUE",
              })}
            />
            <div>{"Yes"}</div>
          </label>

          <label>
            <input
              className='vetting'
              type='radio'
              name='images_in_paper'
              checked={this.state.images_in_paper === "FALSE"}
              onChange={e => this.setState({
                images_in_paper: "FALSE",
              })}
            />
            <div>{"No"}</div>
          </label>
        </div>

        <div className='row vettingRow'>
          <div className='rowHeading'>
            {'Used as model'}
          </div>

          <label>
            <input
              className='vetting'
              type='radio'
              name='used_as_model'
              checked={this.state.used_as_model === "TRUE"}
              onChange={e => this.setState({
                used_as_model: "TRUE",
              })}
            />
            <div>{"Yes"}</div>
          </label>

          <label>
            <input
              className='vetting'
              type='radio'
              name='used_as_model'
              checked={this.state.used_as_model === "FALSE"}
              onChange={e => this.setState({
                used_as_model: "FALSE",
              })}
            />
            <div>{"No"}</div>
          </label>
        </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='reference'
            value={this.state.reference}
            placeholder='Reference'
            onChange={e => this.setState({ reference: 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>
    )
  }
  renderLocationForm() {
    if (!this.state.citation.isUnknown) return
    return (
      <div>
        <div className='param'>
          <label>Institution #1</label>
          <Autocomplete
            placeholder='Institution #1'
            value={this.state.institution_1}
            onSelect={(institution_1, validate_1) => {
              this.setState({ institution_1, validate_1 })
            }}
            onCancel={value => {
              this.setState({ institution_1: '', validate_1: false })
            }}
          />
        </div>

        <div className='param'>
          <label>Institution #2</label>
          <Autocomplete
            placeholder='Institution #2'
            value={this.state.institution_2}
            onSelect={(institution_2, validate_2) => {
              this.setState({ institution_2, validate_2 })
            }}
            onCancel={value => {
              this.setState({ institution_2: '', validate_2: false })
            }}
          />
        </div>

        <div className='param'>
          <label>Institution #3</label>
          <Autocomplete
            placeholder='Institution #3'
            value={this.state.institution_3}
            onSelect={(institution_3, validate_3) => {
              this.setState({ institution_3, validate_3 })
            }}
            onCancel={value => {
              this.setState({ institution_3: '', validate_3: false })
            }}
          />
        </div>
      </div>
    )
  }
}

/*
        <div className='param'>
          <label>{"Verifiable"}</label>
          <input
            className='vetting'
            type='checkbox'
            name='verifiable'
            checked={!!this.state.verifiable}
            onChange={e => this.setState({
              verifiable: e.target.checked,
            })}
          />
        </div>
*/

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

export default connect(mapStateToProps, mapDispatchToProps)(PaperVerify)