import React from 'react'
import { render, Text, ListView, View, Image, StyleSheet } from 'react-ape'

const styles = StyleSheet.create({
  heading: {
    top: 62,
    left: 250,
    color: 'white',
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fontSize: 29,
  },
  date: {
    top: 62,
    left: 1150,
    color: 'red',
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fontSize: 19,
  },
  logo: {
    top: 10,
    left: 30,
  },
  infoAboutRenderer: {
    top: 520,
    left: 45,
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fontSize: 29,
  }
})

class App extends React.Component {
  constructor() {
    super()
    this.posters = [
      { name: 'Narcos', src: 'posters/narcos.jpg' },
      { name: 'Daredevil', src: 'posters/daredevil.jpg' },
      { name: 'Stranger Things', src: 'posters/stranger-things.jpg' },
    ]
    this.state = {
      date: new Date().toISOString()
    }
  }

  componentDidMount() {
    setInterval(() => this.setState({ date: new Date().toISOString() }), 1000)
  }

  renderPostersList() {
    const renderRow = (data, idx) => (
      <View key={idx} onClick={() => { console.log(data) }}>
        <Image src={data.src} width={200} height={300}/>
        <Text content={data.name}/>
      </View>
    )

    return (
      <ListView
        dataSource={this.posters}
        renderRow={renderRow}
      />
    )
  }

  render() {
    return (
      <View>
        <Image
          src={'posters/netflix.png'}
          style={styles.logo}
          width={210}
          height={100}
        />
        <Text style={styles.heading}>
          • Netflix Originals
        </Text>
        <Text style={styles.date}>
          {this.state.date}
        </Text>
        <Text style={styles.infoAboutRenderer}>
          Rendering with Canvas2DContext using React Ape
        </Text>
        { this.renderPostersList() }
      </View>
    )
  }
}

render(<App/>, document.getElementById('canvas-id'))

import { ListView, Text, View } from 'react-ape';

const padding = 30;
const renderRow = (data, idx) => (
  <View
    height={200}
    width={200}
    key={'poster-list-' + idx}>
    <Text style={{top: 220 * (idx + padding), left: 460, color: '#FFF'}}>
      {data.name}
    </Text>
  </View>
);

const myListView = (
  <ListView
    dataSource={this.posters}
    renderRow={renderRow}
    style={styles.list}
  />
);