import React, { Component } from 'react'

import { ROMAN_NUMERALS } from 'app/constants'

export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
  if (paragraph.hidden) return null
  let className = paragraph.type
  if (className !== 'paragraph') className += ' paragraph'
  if (currentParagraph) className += ' current'
  return (
    <div
      className={className}
    >
      {paragraph.annotations.map(annotation => (
        <span
          key={annotation.id}
          className={annotation.id === currentAnnotation ? 'current' : ''}
          onClick={e => onAnnotationClick(e, paragraph, annotation)}
          dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
        />
      ))}
    </div>
  )
}

export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
  if (paragraph.hidden) return null
  let className = currentParagraph ? 'section_heading current' : 'section_heading'
  const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
  return (
    <div
      className={className}
    >
      <span>{ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text}</span>
    </div>
  )
}