import React, { useEffect, useState } from 'react'
import { Card } from './components/Card'
import { FontLoader } from './components/FontLoader'
import { FormattedText } from './components/FormattedText'
import { AqiData } from './types'
import { getData } from './services'

interface Props {
  data: VixonicData
  start: boolean
}

export const App: React.FunctionComponent<Props> = ({ data, start }) => {
  const { parameters, downloadsPath } = data
  const backgroundImageState = parameters.backgroundImage ? `url('${downloadsPath}/${parameters.backgroundImage.filename}')` : ''
  const [formattedData, setFormattedData] = useState<AqiData>()
  const cityInput = parameters?.cityInput || "santiago"
  const msj0 = parameters?.msj0 || 'No hay datos para mostrar'
  const updateTime = 600000

  useEffect(() => {
    if (!start) return

    const fetchData = async () => {
      try {
        const data = await getData(cityInput, updateTime, msj0)
        setFormattedData(data)
      } catch (error) {
        console.error('Error fetching data:', error)
        setFormattedData(undefined)
      }
    }

    fetchData()

    const interval = setInterval(() => {
      fetchData()
    }, updateTime)

    return () => clearInterval(interval)
  }, [start, updateTime, parameters.cityInput])

  return (
    <div style={{
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      display: "flex",
      backgroundImage: backgroundImageState,
      backgroundSize: '100% 100%',
    }}>
      <div style={{ width: "100%", height: "100%", position: "relative" }}>
        {formattedData ? (
          <div style={{
            position: "absolute",
            top: `${parameters.topSeparationCard || 0}px`,
            left: `${parameters.leftSeparationCard || 0}px`
          }}>
            <FontLoader paths={['aqiFormat.font', 'stationFormat.font', 'qualityFormat.font']} parameters={parameters} downloadsPath={downloadsPath} />

            <Card data={formattedData}
              format={{
                cardWidth: parameters?.cardWidth,
                cardHeight: parameters?.cardHeight,
                cardGap: parameters?.cardGap,
                aqiFormat: parameters?.aqiFormat,
                stationFormat: parameters?.stationFormat,
                qualityFormat: parameters?.qualityFormat,
                positionCard: parameters?.positionCard
              }} />
          </div>
        ) : (
          <div style={{
            position: "absolute",
            top: `${parameters.topSeparationCard || 0}px`,
            left: `${parameters.leftSeparationCard || 0}px`
          }}>
            <FontLoader paths={['formatMjs.font']} parameters={parameters} downloadsPath={downloadsPath} />
            <div style={{ display: 'flex', position: 'relative', flex: '1 1 0%', flexDirection: 'column' }}>
              <FormattedText text={msj0} format={parameters?.formatMjs} />
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
