/* 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, Title } from './styles'

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

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

  const currentSeries = data.series ? data.series.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>
        {currentSeries.map(series => (
          <Fragment>
            <Title colour={colours.rose}>{strings.en.currentSeries}</Title>
            <SeriesGrid>
              <SeriesCard series={series} />
            </SeriesGrid>
          </Fragment>
        ))}
        <Title colour={colours.rose}>{strings.en.pastSeries}</Title>
        <SeriesGrid>
          {pastSeries.map(series => (
            <SeriesCard series={series} isPast />
          ))}
        </SeriesGrid>
      </Content>
    </Page>
  )
}

export default Series
