import React from 'react';
import { View, Image, FlatList } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this.state = { movies: [] };
  }

  componentWillMount() {
    fetch('https://obscure-reaches-65656.herokuapp.com/api?city=ThisWeek')
      .then(response => response.json())
      .then(responseData => {
        console.log(responseData);
        this.setState({ movies: responseData });
      })
      .catch((error) => console.log(error));
  }

  renderRow(movies) {
    console.log('renderRow => ');
    console.log(movies)
    return movies.item.movie.map(movie =>
      <View>
        <Image source={{ uri: movie.photoHref}} style={{ height: 150, width: 150 }} />
      </View>
    );
  }

  render() {
    const movies = this.state.movies;
    console.log('render');
    console.log(movies);
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={movies}
          renderItem={this.renderRow}
          horizontal={false}
          keyExtractor={(item, index) => index}
          numColumns={2}
        />
      </View>
    );
  }
}