/* eslint-disable react/prop-types */
import { h, Fragment } from 'preact'
import striptags from 'striptags'

import { H1 } from '../../components/Text'
import Markdown from '../../components/Markdown'
import translations from '../../data/strings'
import InfoLayout from '../../layouts/InfoLayout'
import VideoEmbed from '../../components/VideoEmbed'
import {
  EpisodeCard,
  Title,
  InfoContent,
  Row,
  ActionButton as Button,
  TrailerContainer,
} from './styles'

import config from '../../data/config'
import Page from '../../layouts/Page'

const SeriesPage = ({ data }) => {

  const credits = `
  ## Credits
  ${data.credits}
  `

  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 (
    <Page title={data.title}>
      <InfoLayout title={data.title} subtitle={data.subtitle} image={data.image} theme={data.theme}>
        <Fragment>
          <InfoContent>
            <H1>{data.title}:</H1>
            <H1>{data.subtitle}</H1>
            <Markdown withLinebreaks>{data.description}</Markdown>

            {data.trailer ? (
              <TrailerContainer>
                <VideoEmbed url={data.trailer} />
              </TrailerContainer>
            ) : null}

            {data.links.length ?
              <Row wrap>
                {data.links.map(link => (
                  <a
                    href={link.resourceUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <Button>{link.summary}</Button>
                  </a>
                ))}
              </Row> : null
            }
          </InfoContent>
          {data.episodes.future.length ? (
            <Fragment>
              <Title>{translations.en.nextStream}:</Title>
              {data.episodes.future.map(feeditem => (
                <EpisodeCard
                  theme={data.theme}
                  key={feeditem.start}
                  tzShort={tzShort}
                  {...feeditem}
                />
              ))}
            </Fragment>
          ) : null}
          {data.episodes.past.length ? (
            <Fragment>
              <Title>Past streams:</Title>
              {data.episodes.past.map(feeditem => (
                <EpisodeCard
                  theme={data.theme}
                  key={feeditem.beginsOn}
                  hasPassed
                  onClickButton={() =>
                    setEmbedUrl(`${config.peertube_root}${feeditem.embedPath}`)
                  }
                  {...feeditem}
                />
              ))}
            </Fragment>
          ) : null}
          <InfoContent>
            <Title>Credits</Title>
            <Markdown>{credits}</Markdown>
          </InfoContent>
        </Fragment>

      </InfoLayout>
    </Page>
  )
}

export default SeriesPage