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

import { toArray } from 'app/utils'
import actions from 'app/actions'
import { Arrow } from '../nav/viewer.icons'
import { EfluxClose } from '../nav/eflux.icons'

class ViewerSectionsFootnotes extends Component {
  state = {
    scrollPositions: [],
  }
  constructor(props) {
    super(props)
    this.scrollRef = React.createRef()
  }
  componentDidUpdate(prevProps) {
    if (this.props.footnoteList !== prevProps.footnoteList) {
      this.cacheScrollPositions()
    }
    if (this.props.currentFootnote !== prevProps.currentFootnote) {
      this.scrollToFootnote()
    }
  }
  cacheScrollPositions() {
    let scrollPositions = toArray(this.scrollRef.current.querySelectorAll('.note-element')).map(el => {
      return el.offsetTop
    })
    this.setState({ scrollPositions })
  }
  scrollToFootnote() {
    const { currentFootnote } = this.props
    const id = currentFootnote.footnote_id - 1
    const pos = this.state.scrollPositions[id]
    this.scrollRef.current.scrollTo(0, pos - 5)
  }
  render() {
    const { footnoteList } = this.props
    return (
      <div className='nav-footnotes'>
        <div className='nav-footnotes-close' onClick={() => actions.viewer.hideNavComponent('footnotes')}>
          {EfluxClose}
        </div>
        <div className='nav-footnotes-scroll' ref={this.scrollRef}>
          {footnoteList.map(note => (
            <div key={note.footnote_id} className="note-element">
              <div className="note-number">
                {note.footnote_id}
              </div>
              <div className="note-body">
                <div dangerouslySetInnerHTML={{ __html: note.text }} />
                <u onClick={() => actions.viewer.seekToTimestamp(note.start_ts)}>
                  {'Go to text'}
                </u>
              </div>
            </div>
          ))}
        </div>
        <div className='nav-footnotes-gradient' />
        <FootnotesLink type='down' />
      </div>
    )
  }
}

const FootnotesLink = ({ type }) => (
  <div className="nav-return" onClick={() => actions.viewer.hideNavComponent('footnotes')}>
    <Arrow type={type} />
    {'Notes'}
  </div>
)

const mapStateToProps = state => ({
  footnoteList: state.viewer.footnoteList,
  currentFootnote: state.viewer.currentFootnote,
})

export default connect(mapStateToProps)(ViewerSectionsFootnotes)