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

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

class ViewerSectionsFootnotes extends Component {
  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'>
          {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,
})

export default connect(mapStateToProps)(ViewerSectionsFootnotes)