import { formatDistanceToNow } from 'date-fns'
import { h } from 'preact'
import Link from '../Link'
import { H2, H3, Label } from '../Text'
import strings from '../../data/strings'
import { Img, LabelBlock, Wrapper } from './styles'
import { andList } from '../../helpers/string'
import { colours } from '../../assets/theme'

const SeriesCard = ({ series: { image, episodes: allEpisodes, title, subtitle, hosts: hostsArray, slug, }, isPast, ...rest }) => {
  const episodes = allEpisodes[isPast ? 'past' : 'future']
  const hosts = hostsArray.map(({ actor }) => actor.name)

  // return episodes.length ? (
  return (
    <Link to={`series/${slug}`}>
      <Wrapper {...rest}>
        <Img src={image}>
          <LabelBlock
            $position="top"
          >
            {episodes.length} {strings.en.episodes}
          </LabelBlock>
          <LabelBlock
            $position="bottom"
          >
            {isPast ? strings.en.lastStream : strings.en.nextStream} {episodes && episodes.length && formatDistanceToNow(new Date(episodes[0].endsOn), { addSuffix: true })}
          </LabelBlock>
        </Img>

        <H2 size={32} colour={colours.rose}>{title}</H2>
        <H3 size={21} colour={colours.rose}>{subtitle}</H3>
        {hosts.length ? <Label size={16} colour={colours.rose}>— {andList(hosts)}</Label> : null}
      </Wrapper>
    </Link>
  )
  // ) : null
}

export default SeriesCard
