import { useCallback } from 'react'
import { useApi, useApiCall, Assets, DailyForecasts } from '../../api'
import { useAuth } from '../../auth'
import { saveFile, buildFilename } from './utils'
import Loader, { LoaderColor } from '../Loader'
import './styles.css'

type Forecasts = DailyForecasts.Forecast[]
type PersonalAssets = Assets.Asset[]
interface WallpaperData {
  assets: PersonalAssets
  forecasts: Forecasts
}

function WallpaperPage(): JSX.Element {
  const api = useApi()
  const { user, token } = useAuth()
  const category = user?.profile.sign?.sign || ''
  const loadData = useCallback(() => {
    return Promise.all([
      api.getAssets({ token, category }),
      api.getDailyForecasts({ token }),
    ])
    .then(([{ assets }, { user_daily_forecast }]) => ({
      assets,
      forecasts: user_daily_forecast.forecasts,
    }))
  }, [api, category, token])
  const { data, isPending } = useApiCall<WallpaperData>(loadData)
  const { assets, forecasts } = data
  const asset = assets?.at(0)

  const handleClick = () => asset && saveFile(asset.url, buildFilename(category))

  return (
    <section className='wallpaper-page'>
      <div className='wallpaper-image'>
        {asset ? <img src={asset.url} alt={category} /> : null}
        {asset ? <div className='btn-download' onClick={handleClick} /> : null}
        {isPending ? <Loader color={LoaderColor.White}/> : null}
      </div>
      <div className='wallpaper-content'>
        {isPending ? null : (
          <>
            <h1 className='wallpaper-title'>Analysis of personal background</h1>
            {forecasts.map((forecast) => (
              <div key={forecast.category_name} className='wallpaper-forecast'>
                <h2 className='wallpaper-subtitle'>{forecast.category}</h2>
                <p className='wallpaper-text'>{forecast.body}</p>
              </div>
            ))}
          </>
        )}
      </div>
    </section>
  )
}

export default WallpaperPage