import React, { useContext } from 'react'
import { ConfigureContext } from '../contex/configureContext/ConfigureContext';
import { DataContext } from '../contex/dataContext/DataContex';
import { FontLoader } from './FontLoader';
import { FormattedText } from './FormattedText';
import { AnniversaryItem } from './anniversary-item/AnniversaryItem';
import { ItemsContainer } from './items-container/ItemsContainer';

interface Props {
  start: boolean
}

export const Render = ({ start }: Props) => {

  const { configureState } = useContext(ConfigureContext)
  const { dataEmployee } = useContext(DataContext)
  const { parameters, downloadsPath } = configureState
  const { backgroundImage,
    padding,
    msj0 = '',
    animationMode,
    animationOrder,
    animationSpeed,
    animationTime,
  } = parameters

  let backgroundImageState = backgroundImage && backgroundImage.filename
    ? `url("${downloadsPath}/${backgroundImage.filename}")`
    : ''

  let anniversaryItems = dataEmployee.dataEmployee.map((anniversary: DataEmployee) => {
    return <AnniversaryItem style={'standard'} anniversary={anniversary} />
  })

  return (
    <div style={{
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      backgroundImage: backgroundImageState,
      backgroundSize: '100% 100%',
      padding: padding
    }}>
      <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'optionalFormat.font']} />
      {(dataEmployee.dataEmployee && dataEmployee.dataEmployee.length > 0) ?
        <ItemsContainer
          items={anniversaryItems}
          animation={{
            mode: animationMode,
            duration: Number(animationTime) * 1000,
            speed: animationSpeed,
            reverse: animationOrder
          }}
          animate={start}
        /> :
        <div style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <FormattedText text={msj0.trim() || 'Sin ingresos'} format={parameters.nameFormat || parameters.descriptionFormat} />
        </div>
      }
    </div >
  )
}