import { FontLoader } from '../FontLoader'
import { FormattedText } from '../FormattedText'
import { AnniversaryItem } from '../AnniversaryItem'
import { ItemsContainer } from '../ItemsContainer'
import preset1 from '../../presets/preset1.json'
import preset2 from '../../presets/preset2.json'
import preset3 from '../../presets/preset3.json'
import preset4 from '../../presets/preset4.json'

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

const PRESETS = { preset1, preset2, preset3, preset4 } as unknown as Record<string, Partial<VixonicParameters>>

export const Render = ({ start, appData, anniversaries }: Props) => {
  const { parameters: rawParameters, downloadsPath } = appData

  const withFont = (format: VixonicParameters['nameFormat'], fontFormat: VixonicParameters['nameFont']) => {
    if (!fontFormat) return format
    const { font, fontColor } = fontFormat
    return { ...format, ...(font ? { font } : {}), ...(fontColor ? { fontColor } : {}) }
  }

  const activePreset = rawParameters.themePreset && rawParameters.themePreset !== 'personalizado'
    ? PRESETS[rawParameters.themePreset]
    : undefined

  const parameters: VixonicParameters = activePreset
    ? {
        ...rawParameters,
        ...activePreset,
        nameFormat:        withFont(activePreset.nameFormat,        rawParameters.nameFont),
        descriptionFormat: withFont(activePreset.descriptionFormat, rawParameters.descriptionFont),
        optionalFormat:    withFont(activePreset.optionalFormat,    rawParameters.optionalFont),
        dateDayFormat:     withFont(activePreset.dateDayFormat,     rawParameters.dateDayFont),
        dateMonthFormat:   withFont(activePreset.dateMonthFormat,   rawParameters.dateMonthFont),
      }
    : rawParameters

  const { backgroundImage,
    padding,
    defaultMessage = 'Sin ingresos',
    animationMode = 'fade',
    animationSpeed,
    animationTime,
    containerRows = 3,
    containerColumns = 1,
    containerRowsGap = 5,
    containerColumnsGap = 1,
  } = parameters

  const mergedData = { ...appData, parameters }

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

  const anniversaryItems = anniversaries.map((anniversary: Anniversary) => {
    return <AnniversaryItem style={'standard'} anniversary={anniversary} data={mergedData} 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={mergedData} />
      {(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 >
  )
}
