import React, { Component, PropTypes } from 'react';
import { 
  StyleSheet,
  ScrollView, 
  View, 
  Text, 
  TouchableOpacity, 
  RefreshControl
} from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import NewsItem from '../components/NewsItem';
import Counter from '../components/Counter';
import * as CounterActions from '../actions/counter';

@connect(
  state => ({
    newsFeed: state.newsFeed
  }),
  dispatch => bindActionCreators(CounterActions, dispatch)
)
export default class NewsTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      instagramFeed: [],
      refreshing: false,
      counter: 0,
    };
    this.loadInstagramFeed = this.loadInstagramFeed.bind(this);
  }

  _onRefresh() {
    this.setState({
      refreshing: true,
      counter: this.state.counter + 1,
    });
    this.loadInstagramFeed();
    // this.loadInstagramFeed().then(() => {
    //   this.setState({refreshing: false});
    // });
  }

  loadInstagramFeed() {
    //return fetch('https://facebook.github.io/react-native/movies.json')
    //return fetch('https://jsonplaceholder.typicode.com/posts')
    // feed demo, sfu.satellite id
    // https://smashballoon.com/instagram-feed/demo/?id=3246383861&cols=4
    // instagram json feed, public api
    // https://www.instagram.com/sfu.satellite/media/
    // get large size from items[x].code
    // https://www.instagram.com/p/BITea7bj5nc/media/?size=l
    return fetch('https://www.instagram.com/sfu.satellite/media/')
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
        this.setState({
          instagramFeed: responseJson.items,
          refreshing: false,
        });
        return responseJson;
      })
      .catch((error) => {
        console.error(error);
      });
  }

  componentWillMount() {
    this.loadInstagramFeed();
  }

  toCounter = () => {
    const { navigate } = this.props;
    navigate({
      type: 'push',
      key: 'counter'
    });
  }

  render() {
    const ipsum = "I don't know what you could say about a day in which you have seen four beautiful sunsets.\n\nMany say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.\n\nWe choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.\n\nProblems look mighty small from 150 miles up.";
    return (
      <ScrollView
        style={{marginTop: -1}}
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
            colors={['#303F9F']}
          />
        }
      >
        {//this.state.instagramFeed.slice(0, 2).map((entry) => 
        this.state.instagramFeed.map((entry) => 
          <NewsItem
            title={"SFU Satellite Design Club"}
            instagramModel={entry} 
            counter={this.state.counter} 
            toCounter={this.toCounter}
            tabStyle={this.props.tabStyle}
            key={entry.code}
          />
        )}

        <NewsItem 
          title={"SFU Satellite Design Club"}
          provider={"Facebook"}
          content={ipsum}
          img={"img"}
          counter={this.state.counter} 
          toCounter={this.toCounter}
          tabStyle={this.props.tabStyle}/>

        <View style={[this.props.tabStyle.card, {marginBottom: 20}]}>
          <Text>Fraser Space Systems News</Text>
        </View>
      </ScrollView>
    );
  }
}

@@ -72,16 +72,55 @@
 heet,%0A  
+ListView,%0A  View, %0A  RecyclerViewBacked
 ScrollVi
@@ -126,18 +126,8 @@
 iew,
- %0A  View, 
 %0A  T
@@ -634,16 +634,96 @@
 props);%0A
+    const ds = new ListView.DataSource(%7BrowHasChanged: (r1, r2) =%3E r1 !== r2%7D);%0A
     this
@@ -743,25 +743,22 @@
     
-instagramFeed: %5B%5D
+dataSource: ds
 ,%0A  
@@ -869,16 +869,66 @@
 (this);%0A
+    this._renderRow = this._renderRow.bind(this);%0A
   %7D%0A%0A  _
@@ -1850,23 +1850,56 @@
     
-instagramFeed: 
+dataSource: this.state.dataSource.cloneWithRows(
 resp
@@ -1912,16 +1912,17 @@
 on.items
+)
 ,%0A      
@@ -2253,16 +2253,295 @@
 );%0A  %7D%0A%0A
+  _renderRow(rowData, sectionID, rowID, highlightRow) %7B%0A    return (%0A      %3CNewsItem%0A        instagramModel=%7BrowData%7D %0A        counter=%7Bthis.state.counter%7D %0A        toCounter=%7Bthis.toCounter%7D%0A        tabStyle=%7Bthis.props.tabStyle%7D%0A        key=%7BrowData.code%7D%0A      /%3E%0A    );%0A  %7D%0A%0A
   render
@@ -3226,22 +3226,20 @@
 %0A      %3C
-Scroll
+List
 View%0A   
@@ -3267,16 +3267,180 @@
 p: -1%7D%7D%0A
+        dataSource=%7Bthis.state.dataSource%7D%0A        renderRow=%7Bthis._renderRow%7D%0A        renderScrollComponent=%7Bprops =%3E %3CRecyclerViewBackedScrollView %7B...props%7D /%3E%7D%0A
         
@@ -3648,403 +3648,8 @@
   %3E%0A
-        %7B//this.state.instagramFeed.slice(0, 2).map((entry) =%3E %0A        this.state.instagramFeed.map((entry) =%3E %0A          %3CNewsItem%0A            title=%7B%22SFU Satellite Design Club%22%7D%0A            instagramModel=%7Bentry%7D %0A            counter=%7Bthis.state.counter%7D %0A            toCounter=%7Bthis.toCounter%7D%0A            tabStyle=%7Bthis.props.tabStyle%7D%0A            key=%7Bentry.code%7D%0A          /%3E%0A        )%7D%0A%0A
     
@@ -3920,151 +3920,14 @@
     
-  %3CView style=%7B%5Bthis.props.tabStyle.card, %7BmarginBottom: 20%7D%5D%7D%3E%0A          %3CText%3EFraser Space Systems News%3C/Text%3E%0A        %3C/View%3E%0A      %3C/Scroll
+%3C/List
 View

Fix lag from displaying too many NewsItems by using ListViews instead of ScrollViews