/* eslint-disable react/prop-types */
import { h, Fragment } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'
import { isBefore } from 'date-fns'

import { P } from '../Text'
import translations from '../../data/strings'
import InfoLayout from '../InfoLayout'
import { VideoCard, Title, InfoContent } from './styles'

const Info = ({ data, loading }) => {
  const now = new Date()
  const pastStreams =
    data && data.length
      ? data.filter(feeditem => isBefore(new Date(feeditem.end), now))
      : []

  const futureStreams =
    data && data.length
      ? data.filter(feeditem => isBefore(now, new Date(feeditem.start)))
      : []

  return (
    <InfoLayout
      title={
        data && data.length
          ? `${translations.en.nextStream}:`
          : translations.en.noStreams
      }
      loading={loading}
    >
      {!loading && (
        <InfoContent>
          {futureStreams.map(feeditem => (
            <VideoCard key={feeditem.start} {...feeditem} />
          ))}
          {pastStreams.length ? (
            <Fragment>
              <Title>{translations.en.pastStream}:</Title>
              {pastStreams.map(feeditem => (
                <VideoCard key={feeditem.start} hasPassed {...feeditem} />
              ))}
            </Fragment>
          ) : null}
        </InfoContent>
      )}
    </InfoLayout>
  )
}

export default Info