/* eslint-disable react/prop-types */
import { isWithinInterval } from 'date-fns'
import { Fragment, h } from 'preact'
import { H1, H2 } from '../../components/Text'
import strings from '../../data/strings'
import { useEventApi } from '../../hooks/data'
import { Content, SeriesGrid, SeriesRow } from './styles'

import Page from '../../layouts/Page'
import SeriesCard from '../../components/SeriesCard'
import { colours } from '../../assets/theme'

const Series = () => {
  const { data: seriesDataArray } = useEventApi()
  const pastSeries = []

  const currentSeries = seriesDataArray.filter(series => {
    // const seriesInTheLastMonth = series.episodes.past.filter(episode => {

    // })
    if (series.episodes.future.length) {
      return true
    }

    pastSeries.push(series)
    return false
  })


  return (
    <Page title={strings.en.series}>
      <Content>
        <SeriesGrid>
          {currentSeries.map(series => (
            <Fragment>
              <H1 colour={colours.rose}>{strings.en.currentSeries}</H1>
              <SeriesRow>
                <SeriesCard series={series} />
              </SeriesRow>
            </Fragment>
          ))}
          <H1 colour={colours.rose}>{strings.en.pastSeries}</H1>
          <SeriesRow>
            {pastSeries.map(series => (
              <SeriesCard series={series} isPast />
            ))}
          </SeriesRow>
        </SeriesGrid>
      </Content>
    </Page>
  )
}

export default Series
