import React, { Component } from 'react'

import { ROMAN_NUMERALS } from 'app/constants'
import { SpeakerIcon } from '../../nav/viewer.icons'

export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
  if (paragraph.hidden) return null
  if (paragraph.annotations.length === 0) return null
  let className = paragraph.type
  if (className !== 'paragraph') className += ' paragraph'
  if (currentParagraph) className += ' current'
  const firstAnnotation = paragraph.annotations[0]
  return (
    <div
      className={className}
    >
      <div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}>{SpeakerIcon}</div>
      {paragraph.annotations.map(annotation => {
        if (annotation.type === 'footnote') {
          return (
            <span
              key={annotation.id}
              className='footnote'
              onClick={e => onAnnotationClick(e, paragraph, annotation)}
              dangerouslySetInnerHTML={{ __html: annotation.footnote_id }}
            />
          )
        }
        return (
          <span
            key={annotation.id}
            className={annotation.id === currentAnnotation ? 'current' : ''}
            onClick={e => onAnnotationClick(e, paragraph, annotation)}
            dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
          />
        )
      })}
    </div>
  )
}

export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
  if (paragraph.hidden) return null
  let className = paragraph.type
  if (className !== 'paragraph') className += ' paragraph'
  if (currentParagraph) className += ' current'
  const firstAnnotation = paragraph.annotations[0]
  return (
    <div
      className={className}
    >
      <div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}>{SpeakerIcon}</div>
      {paragraph.annotations.map(annotation => {
        if (annotation.type === 'footnote') {
          return (
            <span
              key={annotation.id}
              className='footnote'
              onClick={e => onAnnotationClick(e, paragraph, annotation)}
              dangerouslySetInnerHTML={{ __html: annotation.footnote_id }}
            />
          )
        }
        const isPullquoteCredit = annotation.type === 'pullquote_credit'
        return (
          <span
            key={annotation.id}
            className={
              isPullquoteCredit
              ? 'pullquote_credit'
              : annotation.id === currentAnnotation
              ? 'current'
              : ''
            }
            onClick={e => !isPullquoteCredit && onAnnotationClick(e, paragraph, annotation)}
            dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
          />
        )
      })}
    </div>
  )
}

export const SectionHeading = ({ paragraph }) => {
  if (paragraph.hidden) return null
  return (
    <div className='section_heading'>
      <span>
        {ROMAN_NUMERALS[paragraph.sectionIndex]}
        {'. '}
        {paragraph.annotations[0].text}
      </span>
    </div>
  )
}

export const HeadingText = ({ paragraph }) => {
  if (paragraph.hidden) return null
  const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
  return (
    <div className='section_heading'>
      <span>{text}</span>
    </div>
  )
}