/* 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 Page from '../../layouts/Page'
import { splitArray } from '../../helpers/utils'

const SeriesPage = ({ data }) => {
  const credits = data.credits ? `
  ## Credits
  ${data.credits}
  ` : null

  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('')
  }

  const links = data.links.length ? splitArray(data.links, 2) : null


  return (
    <Page title={data.title} theme={data.theme} withHeader={false}>
      <InfoLayout title={data.title} subtitle={data.subtitle} image={data.image} theme={data.theme}>
        <Fragment>
          <InfoContent>
            <H1>{data.title}:</H1>
            <H1>{data.subtitle}</H1>
            {data.description ? <Markdown withLinebreaks theme={data.theme}>{data.description}</Markdown> : null}

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

            {links ?
              links.map(linkRow => <Row>
                {linkRow.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.program}:</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={() => null} // todo: fix this
                  {...feeditem}
                />
              ))}
            </Fragment>
          ) : null}
          {credits ? <InfoContent>
            <Title>Credits</Title>
            <Markdown theme={data.theme}>{credits}</Markdown>
          </InfoContent> : null}
        </Fragment>

      </InfoLayout>
    </Page>
  )
}

export default SeriesPage