/* eslint-disable react/prop-types */
import { h, Fragment } from 'preact'
import { useEffect } from 'preact/hooks'
import enGB from 'date-fns/locale/en-GB'

import { H1, Label } 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,
  LogosRow,
  ActionButton as Button,
  TrailerContainer,
} from './styles'

import Page from '../../layouts/Page'
import { splitArray } from '../../helpers/utils'
import { defaultTheme } from '../../assets/theme'

const SeriesPage = ({ data }) => {
  const theme = data.theme || defaultTheme
  const { orgs } = data

  const credits = data.credits ? `
  ## Credits
  ${data.credits}
  ` : null

  const orgsList = Object.values(orgs || {})

  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={theme}>
        <Fragment>
          <InfoContent>
            <H1>{data.title}:</H1>
            <H1>{data.subtitle}</H1>
            {data.description ? <Markdown withLinebreaks theme={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={theme}
                  key={feeditem.start}
                  {...feeditem}
                />
              ))}
            </Fragment>
          ) : null}
          {data.episodes.past.length ? (
            <Fragment>
              <Title>Past streams:</Title>
              {data.episodes.past.map(feeditem => (
                <EpisodeCard
                  theme={theme}
                  key={feeditem.beginsOn}
                  hasPassed
                  onClickButton={() => null} // todo: fix this
                  {...feeditem}
                />
              ))}
            </Fragment>
          ) : null}
          {credits ? <InfoContent>
            <Markdown theme={theme}>{credits}</Markdown>
          </InfoContent> : null}
        </Fragment>
        {orgsList.length ? (
          <LogosRow $wrap>
            {orgsList.map((org, index) => (
              <Fragment>
                <a href={org.orgUrl}>
                  <img src={org.logoUrl} alt={`${org.orgName} logo`} />
                </a>
                {orgsList.length === 2 && index + 1 !== orgsList.length ? <Label colour={theme.foreground}>{'//'}</Label> : null}
              </Fragment>
            ))}
          </LogosRow>
        ) : null}
      </InfoLayout>
    </Page>
  )
}

export default SeriesPage