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

import { H1 } from '../../components/Text'
import Markdown from '../../components/Markdown'
// import translations from '../../data/strings'
import InfoLayout from '../../components/InfoLayout'
import VideoEmbed from '../../components/VideoEmbed'
import {
  VideoCard,
  Title,
  InfoContent,
  PositionedCross as CrossSvg,
  Row,
  ActionButton as Button,
  Trailer,
} from './styles'

import intro from '../../data/intro.md'
// import credits from '../../data/credits.md'

import config from '../../data/config'
import trailerThumb from '../../assets/img/main_thumb.png'

const SeriesPage = ({ data }) => {
  const trailerUrl = `https://www.youtube-nocookie.com/embed/${config.seriesTrailerId}?autoplay=1&vq=hd1080`
  const [embedURL, setEmbedUrl] = useState('')

  const onClickTrailerButton = () => {
    setEmbedUrl(trailerUrl)
  }
  const deactivateEmbed = () => {
    setEmbedUrl('')
  }

  console.log({ data })

  // const pastStreams =
  //   data && data.length
  //     ? data.filter(feeditem => isPast(new Date(feeditem.end)))
  //     : []

  // const futureStreams =
  //   data && data.length
  //     ? data
  //         .filter(
  //           feeditem =>
  //             feeditem.id !== (currentVideo && currentVideo.id) &&
  //             isFuture(new Date(feeditem.start))
  //         )
  //         .sort(
  //           (a, b) =>
  //             // Turn your strings into dates, and then subtract them
  //             // to get a value that is either negative, positive, or zero.
  //             new Date(a.start) - new Date(b.start)
  //         )
  //     : []

  const dateString = `${new Date()}`
  let tzShort =
    // Works for the majority of modern browsers
    dateString.match(/\(([^\)]+)\)$/) ||
    // IE outputs date strings in a different format:
    dateString.match(/([A-Z]+) [\d]{4}$/)

  if (tzShort) {
    // Old Firefox uses the long timezone name (e.g., "Central
    // Daylight Time" instead of "CDT")
    tzShort = tzShort[1].match(/[A-Z]/g).join('')
  }

  return (
    <InfoLayout title={data.name} subtitle={striptags(data.summary)}>
      {embedURL ? (
        <VideoEmbed onClose={deactivateEmbed} url={embedURL} />
      ) : null}
      <Fragment>
        <InfoContent>
          <H1>{data.name}:</H1>
          <H1>{data.summary}</H1>
          <Markdown withLinebreaks>{intro}</Markdown>

          <Trailer imgSrc={trailerThumb} onClick={onClickTrailerButton} />

          <Row>
            <a
              href="https://discord.gg/Xu9D3qVana"
              target="_blank"
              rel="noopener noreferrer"
            >
              <Button>Join the Discord</Button>
            </a>
            <a
              href="https://ndc.substack.com/subscribe"
              target="_blank"
              rel="noopener noreferrer"
            >
              <Button>Subscribe to the mailing list</Button>
            </a>
          </Row>
        </InfoContent>
        {/* {currentVideo && (
          <Fragment>
            <Title>{translations.en.nowPlaying}:</Title>
            <VideoCard {...currentVideo} />
          </Fragment>
        )}

        {futureStreams.length ? (
          <Fragment>
            <Title>{translations.en.nextStream}:</Title>
            {futureStreams.map(feeditem => (
              <VideoCard
                key={feeditem.start}
                tzShort={tzShort}
                {...feeditem}
              />
            ))}
          </Fragment>
        ) : null}

        {pastStreams.length ? (
          <Fragment>
            <Title>{translations.en.pastStream}:</Title>
            {pastStreams.map(feeditem => (
              <VideoCard
                key={feeditem.start}
                hasPassed
                onClickButton={() =>
                  setEmbedUrl(`${config.peertube_root}${feeditem.embedPath}`)
                }
                {...feeditem}
              />
            ))}
          </Fragment>
        ) : null} */}
        {/* <InfoContent>
          <Markdown>{credits}</Markdown>
        </InfoContent> */}
      </Fragment>

    </InfoLayout>
  )
}

export default SeriesPage