import React from 'react'

import { EPILEPSY_WARNING, ROMAN_NUMERALS } from 'app/constants'
import { displayThumbnailURL } from 'app/utils/annotation.utils'

export const FullscreenCurtain = ({ element, transitionDuration }) => {
  // console.log(element, isEntering)
  const { color } = element
  const style = {
    backgroundColor: color.backgroundColor,
    color: color.textColor,
    transitionDuration,
  }
  // console.log(element)
  const curtainBackground = (element.cover_style !== "hidden" && !!element.mediaItem) && {
    backgroundImage: 'url(' + (displayThumbnailURL(element.mediaItem)) + ')',
    backgroundSize: element.cover_style,
  }

  let texts = []
  // console.log(element)
  switch (element.settings.curtain_style) {
    case 'section_heading':
      texts.push((
        <div key='idx'>{ROMAN_NUMERALS[element.section.index]}{'.'}</div>
      ))
      texts.push((
        <div key='title' dangerouslySetInnerHTML={{ __html: element.annotation.settings.curtain_text || element.section.title }} />
      ))
      break

    case 'video_title':
      texts.push((
        <i key='video'><div dangerouslySetInnerHTML={{ __html: element.annotation.settings.curtain_text }} /></i>
      ))
      break

    default:
      texts.push((
        <div key='curtain' dangerouslySetInnerHTML={{ __html: element.annotation.settings.curtain_text }} />
      ))
      break
  }
  if (element.settings.flashing_light_warning) {
    texts.push((
      <div key='flashing_light_warning' className='flashing_light_warning'>{EPILEPSY_WARNING}</div>
    ))
  }
  return (
    <div className='fullscreen-element curtain' style={style}>
      {curtainBackground && (
        <div className='curtain-background' style={curtainBackground} />
      )}
      <div className='curtain-text'>
        {texts}
      </div>
    </div>
  )
}