import { FontLoader } from '../FontLoader'
import { FormattedText } from '../FormattedText'
import { AnniversaryItem } from '../AnniversaryItem'
import { ItemsContainer } from '../ItemsContainer'

interface Props {
  start: boolean
  appData: VixonicData
  anniversaries: Anniversary[]
}


export const Render = ({ start, appData, anniversaries }: Props) => {
  const { parameters, downloadsPath } = appData
  const { backgroundImage,
    padding,
    defaultMessage = 'Sin ingresos',
    animationMode = 'fade',
    animationSpeed,
    animationTime,
    containerRows = 3,
    containerColumns = 1,
    containerRowsGap = 5,
    containerColumnsGap = 1,
  } = parameters

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

  const anniversaryItems = anniversaries.map((anniversary: Anniversary) => {
    return <AnniversaryItem style={'standard'} anniversary={anniversary} data={appData} key={anniversary?.name} />
  })

  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']} data={appData} />
      {(anniversaries.length > 0) ?
        <ItemsContainer
          items={anniversaryItems}
          animation={{
            mode: animationMode,
            duration: Number(animationTime) * 1000,
            speed: animationSpeed,
          }}
          animate={start}
          containerRows={containerRows}
          containerColumns={containerColumns}
          containerRowsGap={containerRowsGap}
          containerColumnsGap={containerColumnsGap}
        /> :
        <div style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <FormattedText text={defaultMessage.trim()} format={parameters.defaultMessageFormat} />
        </div>
      }
    </div >
  )
}
