import { h } from 'preact'
import { format } from 'date-fns'
import Link from '../Link'
import { H2, H3, Label } from '../Text'
import strings from '../../data/strings'
import { andList } from '../../helpers/string'
import { colours } from '../../assets/theme'
import { Img, Left, Right, Center, Title, Row, Column, StyledButton as Button } from './styles'
import { useEventApi } from '../../hooks/data'

const EpisodeCard = ({ image, title, seriesId, beginsOn, id, ...rest }) => {
  const { data: { series: allSeries } } = useEventApi()

  const series = seriesId ? allSeries.filter(({ id }) => id === seriesId)[0] : {}
  const hosts = series.hosts ? series.hosts.map(host => host.actor.name) : null
  const startTime = format(new Date(beginsOn), 'ha')


  return (
    <Row align="stretch" {...rest}>
      <Left>
        <Link to={`/series/${series.slug}#${id}`}><Img src={image} /></Link>
        <Button>Play now</Button>
      </Left>
      <Center justify="space-betweeen">
        <Title size={24} colour={colours.rose} weight="500">{title}</Title>
        <div>
          <H3 weight="500" colour={colours.rose}>From: <Link textProps={{
            weight: '700'
          }} to={`/series/${series.slug}`}>{`${series.title}: ${series.subtitle}`}</Link></H3>
          {hosts ? <Label size={16} colour={colours.rose}>— {andList(hosts)}</Label> : null}
        </div>
      </Center>
      <Right>
        <Label size={24} colour={colours.rose} weight="600">{startTime}</Label>
      </Right>
    </Row>
  )
}


export default EpisodeCard