import React, { Component } from 'react'

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

const notes = [
  { index: 1, text: "<i>Lorem ipsum</i>, p. 156." },
  { index: 2, text: "Ibid." },
  { index: 3, text: "Ibid." },
  { index: 4, text: "Cicero, <i>De finibus bonorum et malorum</i>, 1.10.32." },
  { index: 5, text: "Ibid." },
  { index: 6, text: "Ibid." },
  { index: 7, text: "<i>Lorem Ipsum: The Prosody of Verismillitude</i>, p. 72." },
  { index: 8, text: "Ibid." },
  { index: 9, text: "Ibid." },
  { index: 10, text: "Ibid." },
  { index: 11, text: "Ibid." },
  { index: 12, text: "Ibid." },
  { index: 13, text: "Ibid." },
  { index: 14, text: "Ibid." },
]


export default class ViewerSectionsFootnotes extends Component {
  render() {
    return (
      <div className='nav-footnotes'>
        <div className='nav-footnotes-close' onClick={() => actions.viewer.hideNavComponent('footnotes')}>
          x
        </div>
        <div className='nav-footnotes-scroll'>
          {notes.map(note => (
            <div key={note.index} className="note-element">
              <div className="note-number">{note.index}</div>
              <div className="note-body">
                <div dangerouslySetInnerHTML={{ __html: note.text }} />
                <u>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>
)